Question

我有一些基于ng-repeat动态生成的字段。但是，我需要动态设置这些字段的ng-model名称，这应该基于ng-repeat的$ index，或者应该将ng-repeat项目值作为ng-model的名称。

以下是我的代码

 <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-model具有以下名称

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

等基于ng-repeat的$ 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>

使用ng-repeat时动态设置ng-model名称（或如何使用ng-repeat项目值作为ng-model名称）

1 个答案: