1

使用 Angular 1.0.7，如何为嵌套ng-repeat的 s 指定单个索引，以便内部数组上的每个项目都获得一个连续的索引值？（即所有内部数组中的所有元素都为 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。

有任何想法吗？

4

2 回答 2

4

你不能依赖于你{{index()}}被调用的次数是固定的。每当 Angular 决定对范围进行脏检查时，它将运行所有绑定。

您可以根据其他索引生成值。演示插件

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;
  }
});
于 2013-10-01T22:38:06.507 回答
1

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

尝试这个：

<ul>
    <li ng:repeat="item in arr1">
        <ul>
            <li ng:repeat="child in item.children">{{$index + 1}}</li>
        </ul>
    </li>
</ul>
于 2013-10-01T22:27:42.697 回答