如何在AngularJS中使用ng-repeat动态生成ng-model ="my _ {{$ index}}"？

Question

我想问你是否可以帮我解决这个问题.

我在这里创建了一个问题jsfiddle .我需要使用ng-model ="my _ {{$ index}}"的方式在ng-repeater中使用ng-model动态生成一些输入.

在jsfiddle中,你可以看到它运行正常,直到我尝试动态生成它.

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),并绑定到这个对象的属性,如下所示:

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

这是一个jsFiddle,说明了完整的解决方案:http://jsfiddle.net/KjsWL/