如何在AngularJS中用ng-repeatdynamic生成ng-model =“my _ {{$ index}}”？

我想问你是否可以帮我一把。

我在这里创build了一个我的问题jsfiddle。 我需要使用ng-model =“my _ {{$ index}}”方式在ng-repeater中dynamic生成一些带有ng-model的input。

在jsfiddle中，你可以看到它的一切工作正常，直到我试图dynamic生成它。

该html将是：

<div ng-app> <div ng-controller="MainCtrl"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <select ng-model="selectedQuery" ng-options="q.name for q in queryList" > <option title="---Select Query---" value="">---Select Query---</option> </select> </td> </tr> <tr ng-repeat="param in parameters"> <td>{{param}}:</td> <td><input type="text" ng-model="field_X" />field_{{$index}}</td> </tr> </table> <div> <div> 

和JavaScript …

 function MainCtrl($scope) { $scope.queryList = [ { name: 'Check Users', fields: [ "Name", "Id"] }, { name: 'Audit Report', fields: [] }, { name: 'Bounce Back Report', fields: [ "Date"] } ]; $scope.$watch('selectedQuery', function (newVal, oldVal) { $scope.parameters = $scope.selectedQuery.fields; }); } 

你能给我一些想法吗？

非常感谢。

Answer 1

它解决你的问题吗？

 function MainCtrl($scope) { $scope.queryList = [ { name: 'Check Users', fields: [ "Name", "Id"] }, { name: 'Audit Report', fields: [] }, { name: 'Bounce Back Report', fields: [ "Date"] } ]; $scope.models = {}; $scope.$watch('selectedQuery', function (newVal, oldVal) { if ($scope.selectedQuery) { $scope.parameters = $scope.selectedQuery.fields; } }); } 

在您的控制器中：

  <tr ng-repeat="param in parameters"> <td>{{param}}:</td> <td><input type="text" ng-model="models[param] " />field_{{$index}}</td> </tr> 

小提琴

Answer 2

你可以做的是在一个作用域（比如values ）上创build一个对象并绑定到这个对象的属性上，如下所示：

 <input type="text" ng-model="values['field_' + $index]" /> 

这里是一个说明完整解决scheme的jsFiddle： http : //jsfiddle.net/KjsWL/

Answer 3

我从pkozlowski的详细说明了我的答案，并尝试使用dynamicng模型生成一个dynamic表单：

 <form ng-submit="testDynamic(human)"> <input type="text" ng-model="human.adult[($index+1)].name"> <input type="text" ng-model="human.adult[($index+1)].sex"> <input type="text" ng-model="human.adult[($index+1)].age"> </form> 

但首先，我们需要在控制器内定义“人”的范围

 $scope.human= {}; 

然后，在提交时，我们将获得这样的数据（取决于产生多less字段）：

 var name = human.adult[i].name; var sex = human.adult[i].sex; var age = human.adult[i].age; 

这很简单，我希望我的回答有帮助。

Answer 4

是否有理由生成这些字段名称？ 你可以将每个字段作为一个名称和值而不是string名称的对象吗？ （小提琴）

 function MainCtrl($scope) { $scope.queryList = [ { name: 'Check Users', fields: [ { name: "Name" }, { name: "Id" } ] }, { name: 'Audit Report', fields: [] }, { name: 'Bounce Back Report', fields: [ { name: "Date" } ] } ]; } 

只需重复selectedQuery.fields ：

 <tr ng-repeat="field in selectedQuery.fields"> <td>{{field.name}}:</td> <td><input type="text" ng-model="field.value" /></td> </tr> 

Answer 5

Beterraba的回答对我很有帮助。 但是，当我不得不将解决scheme迁移到Typescript时，它不会为我效劳。 这是我所做的。 我扩展了单个参数（在你的例子queryList字段）到包含一个“值”字段的完整对象。 然后我绑定到“价值”领域，它运作的很好！

原来你有：

 [ { name: 'Check Users', fields: [ "Name", "Id"] }, ... } ] 

我改变它是这样的：

 [ { name: 'Check Users', fields: [ {Text:"Name",Value:""}, {Text:"Id",Value:0}], ... ] } ] 

…绑定到“价值”子字段。

如果你在意，这是我的手稿。

在html中：

 <div ng-repeat="param in ctrl.sprocparams" > <sproc-param param="param" /> </div> 

在使用Angular Material的sproc-param指令中。 看看我把ng-model绑定到param.Value的地方：

 return { restrict: 'E', template: ` <md-input-container class="md-block" flex-gt-sm> <label>{{param.Name}}</label> <input name="{{param.Name}}" ng-model=param.Value></input> </md-input-container>`, scope: { param: "=" } }