来自后端的 JSON 值上的动态模型名称

Question

我有一个来自后端的 Json，如下所示：

var infoArray = [
        {
            "field" : "text",
            "placeholder" : "Name",
            "modelName" : "userName"
        },{
            "field" : "date",
            "placeholder" : "DOB",
            "modelName" : "userDob" 
        },{
            "field" : "text",
            "placeholder" : "Location",
            "modelName" : "userLocation"
        }
    ];

It's already set that there can be at most 10 text fields and 4 date fields i can get.

由于 ModelName 来自后端，所以我试图将其放入简单的 ng-repeat 中，但这似乎不起作用 Here is Plnkr Link

Indeed i found one solution by myself and the code seems to be bulky for that.

Here is plnkr Link

And one more thing i have to consider is that i have to use the modelName to get the values from the user and then sent it back.

任何人都可以建议优化解决方案或修改我的代码。谢谢！

Answer 1

你试过的几乎是正确的。只需要删除 ng-model

中的大括号

 <div ng-repeat="info in infoArray">
       <input type="{{info.field}}" placeholder="{{info.placeholder}}" ng-model="info.modelName" ng-init="callFunc(info)" /> 
 </div>

Demo

Answer 2

您可以通过以下方式执行此操作：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.answers={};
  $scope.infoArray = [
        {
            "field" : "text",
            "placeholder" : "Name",
            "modelName" : "userName"
        },{
            "field" : "date",
            "placeholder" : "DOB",
            "modelName" : "userDob"
        },{
            "field" : "text",
            "placeholder" : "Location",
            "modelName" : "userLocation"
        }
    ];
    
    $scope.print=function(){
      console.log(answers);
    }

    
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div ng-repeat="info in infoArray">
    
       <input type="{{info.field}}" placeholder="{{info.placeholder}}" ng-model="answers[info.modelName]"/> 
   </div> 
   <button ng-click="print()">Print</button>
   {{answers.userName}}
   {{answers.userDob}}
   {{answers.userLocation}}
   
  </body>

</html>

Remove curly braces from ng-model and in your javascript file create a new object as in my example i have created an answers object. and in the ng-model use in this way : `

   <input type="{{info.field}}" placeholder="{{info.placeholder}}" ng-model="answers[info.modelName]"/>

` 现在，如果你想访问模型值，那么你可以这样做：

   {{answers.userName}}
   {{answers.userDob}}
   {{answers.userLocation}}

希望，这可以解决您的问题。谢谢:)

来自后端的 JSON 值上的动态模型名称

Dynamic model name on the JSON value from the Backend

html

javascript

json

angularjs

angular-directive