來自后端的JSON值的動態模型名稱

Question

我有一個來自后端的Json，如下所示：

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

它已設置為最多可以有10個文本字段和4個日期字段。

由於ModelName來自后端所以我試圖把它放在簡單的ng-repeat中，但這似乎不起作用 這里是Plnkr Link

事實上，我自己找到了一個解決方案，代碼似乎很笨重。

這是plnkr Link

還有一件事我需要考慮的是，我必須使用modelName從用戶獲取值，然后將其發回。

任何人都可以建議優化的解決方案或修改我的代碼。 謝謝！

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>

演示

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>

從ng-model中刪除花括號，並在javascript文件中創建一個新對象，就像在我的示例中我創建了一個answers對象。 並在ng-model中使用這種方式：`

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

`現在，如果您想訪問模型值，那么您可以這樣做：

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

希望，這解決了你的問題。 謝謝：）

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