Question

使用Angular 1.0.7，如何为嵌套的ng-repeat指定单个索引，以便内部数组上的每个项都获得连续的索引值？（即所有内部数组中所有元素的0,1,2,3等等）

说明：

<ul>
    <li ng:repeat="item in arr1">
        <ul>
            <li ng:repeat="child in item.children">{{consecutiveIndex++}}</li>
        </ul>
    </li>
</ul>

我试图通过以下方式实现它：

var cindex= -1;
$scope.cindex= function () {
  console.log('cindex', cindex);
  return ++cindex;
};

HTML：

<ul>
    <li ng:repeat="item in arr1">
        <ul>
            <li ng:repeat="child in item.children">{{index()}}</li>
        </ul>
    </li>
</ul>

我正在使用它来获得非常奇特的AngularJS错误（相信我，你不想知道）。

我还发现（在控制台输出之后），即使对于只有4个元素的数组，ng-repeat也会使我的cindex()函数超过80次。意思是代替0,1,2和3 - 我得到了84分，85分，86分和87分。

有什么想法吗？

Answer 1

您不能依赖于{{index()}}被称为固定次数。每当angular决定脏检查范围时，它将运行所有绑定。

您可以根据其他索引生成值。 Demo plunker

<强> HTML

<body ng:controller="MainCtrl">
  <ul>
     <li ng:repeat="item in arr1">
        <ul ng:init="parentIndex = $index">
           <li ng:repeat="child in item.children">{{getConsecutiveIndex(parentIndex, $index)}}</li>
        </ul>
     </li>
  </ul>
</body>

<强> JS

app.controller('MainCtrl', function($scope) {
  $scope.arr1 = [{children:[0,1,2,3]}, {children:[4,5]}, {children:[6,7,8]}];

  $scope.getConsecutiveIndex = function(parentIndex, $index) {
    var total = 0;
    for(var i = 0; i < parentIndex; i += 1) {
      total += $scope.arr1[i].children.length;
    }
    return total + $index;
  }
});

Answer 2

ngRepeat directive提供了一个特殊的$index属性，可以满足您的需求。它从零开始，并在每个模板实例的本地范围内公开。

试试这个：

<ul>
    <li ng:repeat="item in arr1">
        <ul>
            <li ng:repeat="child in item.children">{{$index + 1}}</li>
        </ul>
    </li>
</ul>

AngularJS使用单个索引嵌套ng-repeats？

2 个答案: