javascript - 来自后端的 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