如何在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; }); } 

你能给我一些想法吗?

非常感谢。

它解决你的问题吗?

 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> 

小提琴

你可以做的是在一个作用域(比如values )上创build一个对象并绑定到这个对象的属性上,如下所示:

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

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

我从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; 

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

是否有理由生成这些字段名称? 你可以将每个字段作为一个名称和值而不是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> 

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: "=" } }