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

Question

I have a Json from backend like this: 我有一个来自后端的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. 它已设置为最多可以有10个文本字段和4个日期字段。

Since ModelName is coming from backend so i am trying to put that in the simple ng-repeat but that seems not working Here is Plnkr Link 由于ModelName来自后端所以我试图把它放在简单的ng-repeat中，但这似乎不起作用 这里是Plnkr Link

Indeed i found one solution by myself and the code seems to be bulky for that. 事实上，我自己找到了一个解决方案，代码似乎很笨重。

Here is plnkr Link 这是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. 还有一件事我需要考虑的是，我必须使用modelName从用户获取值，然后将其发回。

Could anyone please suggest the optimized solution or modification over my code. 任何人都可以建议优化的解决方案或修改我的代码。 Thanks ! 谢谢！

Answer 1

what you tried is almost correct. 你试过的几乎是正确的。 just need to remove the curly brackets in ng-model 只需要删除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

You can do this in the following manner: 您可以通过以下方式执行此操作：

 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. 从ng-model中删除花括号，并在javascript文件中创建一个新对象，就像在我的示例中我创建了一个answers对象。 and in the ng-model use in this way : ` 并在ng-model中使用这种方式：`

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

` Now , if you want to access model values then you can do in this way: `现在，如果您想访问模型值，那么您可以这样做：

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

Hope , this solves your problem. 希望，这解决了你的问题。 Thanks :) 谢谢：）

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-04-29 09:51:16

解决方案2
0 2017-04-29 10:11:58

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-04-29 09:51:16

解决方案2 0 2017-04-29 10:11:58

解决方案1
0 已采纳 2017-04-29 09:51:16

解决方案2
0 2017-04-29 10:11:58