AngularJS嵌套纳克重复序列与单一索引? [英] AngularJS nested ng-repeats with a single index?
问题描述
采用了棱角分明1.0.7,我怎么可以指定嵌套的 NG-重复
让一个指数,这样在内部阵列的每个项目获得的连续索引值? (即0,1,2,3等在所有内阵列的所有元素)
Using Angular 1.0.7, how can I specify a single index for nested ng-repeat
s, so that each item on the inner arrays get's a consecutive index value? (i.e. 0, 1, 2, 3 and so on for all elements in all inner arrays)
要说明
<ul>
<li ng:repeat="item in arr1">
<ul>
<li ng:repeat="child in item.children">{{consecutiveIndex++}}</li>
</ul>
</li>
</ul>
我试图实现它以下述方式:
I tried to achieve it in the following manner:
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这个错误(相信我,你不想知道)。
I am getting quite exotic AngularJS errors using this (believe me, you don't wanna know).
我也发现了(以下控制台输出),即使对于只有4个元素,NG-重复打我的 CINDEX()
函数超过80数组倍。含义而不是0,1,2和3 - 我84,85,86和87
I have also found out (following the console output), that even for an array with a mere 4 elements, ng-repeat hit my cindex()
function over 80 times. Meaning instead of 0, 1, 2 and 3 - I got 84, 85, 86 and 87.
任何想法?
推荐答案
您可以不依赖于你的 {{指数()}}
被称为一个固定数额次数。每当角度决定脏检查的范围,它将运行所有绑定。
You can't depend on your {{index()}}
to be called a fixed amount of times. Whenever angular decides to dirty check a scope it will run all the bindings.
您可以基于其他指标的值。 演示plunker
You can generate the value based on other indexes. 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;
}
});
这篇关于AngularJS嵌套纳克重复序列与单一索引?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!