使用ng-重复时动态设置ng-模型名称(或如何使用ng-重复项值作为ng-模型名称)

Question

我有一些字段是基于ng-重复动态生成的。但是，我需要动态地为这些字段设置ng模型名称，这应该是基于来自ng-重复的$index，或者应该将ng-重复项值作为ng-模型的名称。

下面是我的代码

 <div class="panel-body"
                        data-ng-controller="XModelController as xmdlCtrl">

 ................

 ................

 <th data-ng-repeat="item in ['xmdlCtrl.rsptYrs.year1Date', 'xmdlCtrl.rsptYrs.year2Date', 'xmdlCtrl.rsptYrs.year3Date', 'xmdlCtrl.rsptYrs.year4Date', 'xmdlCtrl.rsptYrs.year5Date', 'xmdlCtrl.rsptYrs.year6Date'] | limitTo: xmdlCtrl.colCount"><section col col-11>Year{{$index+1}}</section>

 <section col col-11>
   <label class="input"> <input id="year{{$index+1}}" 
          placeholder="MMM-YYYY" required="required" data-ng-model="'xmdlCtrl.rsptYrs.year{{$index+1}}Date" /</label></section></th>

 ........................

上面的代码在执行时会创建一个令牌错误，因为它不允许'{{}}'

我的实际要求是，我希望ng模型具有以下名称

ng-model="xmdlCtrl.rsptYrs.year1Date" ng-model="xmdlCtrl.rsptYrs.year2Date"

以此类推，基于ng重复的$index值(这实际上等于xmdlCtrl.rsptYrs.year($index+1)Date )。

我曾经历过类似的帖子，但似乎没有一篇文章对此有一个准确的解决方案。

Answer 1

​

angular.module('app', []).controller('ctrl', function($scope){
  $scope.items = [{test1: 1}, {test2: 1}]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
  <input ng-repeat-start='item in items' ng-model="item['test' + ($index + 1)]" type='number'/>  
  <br ng-repeat-end>
  {{items | json}}
</div>

​