Question

我有2 ng重复这样的

<div ng-repeat="i in items1" ng-if="i.name == 'abc'">
    <input name="iName[{{$index}}].ele" value="" />
</div>
<div ng-repeat="i in items2" ng-if="i.name == 'abc'">
    <input name="iName[{{$index}}].ele" value="" />
</div>

它产生这样的输出

<input name="iName[1].ele" value="" />
<input name="iName[3].ele" value="" />
<input name="iName[1].ele" value="" />

如何修复上面的代码以便输出如下，请参阅索引

<input name="iName[0].ele" value="" />
<input name="iName[1].ele" value="" />
<input name="iName[2].ele" value="" />

Answer 1

你试图在视图中过于聪明。更好的方法是添加一些控制器代码，将过滤后的项目拉入数组，然后输出该数组。看到这个 http://plnkr.co/edit/G1npriGYeYKGIx94QqTG?p=preview

像

这样的东西

 angular.forEach($scope.items1,function(item){
      if(item.name=='abc') $scope.filtereditems.push(item);
    });
    angular.forEach($scope.items2,function(item){
      if(item.name=='abc') $scope.filtereditems.push(item);
    });

现在您可以绑定到filteredItems

Answer 2

在循环的每次迭代中重新评估ng-if，因此您的代码隐藏了i.name！=＆＃39; abc＆＃39;的每个输入。如果要在每次迭代时显示$ index值，则需要将ng-repeat和ng-if放在单独的标记中，如下所示：

  <div ng-repeat="i in items1">
    $index = {{$index}}
    <input ng-if="i.name == 'abc'" name="iName[{{$index}}].ele" value="{{$index}}" />
  </div>

请参阅plunker：http://plnkr.co/edit/2HKgnk

如何手动设置ng-repeat生成的元素索引？

2 个答案: