AngularJS嵌套纳克重复序列与单一索引? [英] AngularJS nested ng-repeats with a single index?

查看:140
本文介绍了AngularJS嵌套纳克重复序列与单一索引?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

采用了棱角分明1.0.7,我怎么可以指定嵌套的 NG-重复让一个指数,这样在内部阵列的每个项目获得的连续索引值? (即0,1,2,3等在所有内阵列的所有元素)

Using Angular 1.0.7, how can I specify a single index for nested ng-repeats, 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆