如何在AngularJS中为子行设置索引值

20 浏览
0 Comments

如何在AngularJS中为子行设置索引值

我有一个需求，需要为子行添加索引值。我有一个包含子行的分组行。我使用ng-repeat，并使用$index来显示子行，如下所示：\nHTML代码：\n



  {{node.groupName}}  



  {{$index}}

\n但显示的结果如下所示：\n\"enter\n但我希望它显示的结果如下所示：\n\"enter\n我对Angular JS还不熟悉，不知道如何实现这样的显示效果。请帮助我。

0

1 答案

0 Comments

问题的原因是需要在AngularJS中设置子行的索引值。解决方法是使用$parent.$index属性并进行一些数学计算。

在给出的代码中，使用ng-repeat指令来循环遍历data数组中的每个group。在每个group中，使用ng-repeat指令循环遍历items数组中的每个item。然后使用getIndex函数来获取索引值。

getIndex函数首先检查previousGroupIndex是否大于等于0，如果是，则调用getPreviousItemsLength函数获取前一个group的items数组的长度。然后返回previousGroupLength加上currentItemIndex的结果。如果previousGroupIndex小于0，则直接返回currentItemIndex。

getPreviousItemsLength函数使用for循环遍历data数组，累加前面每个group的items数组的长度，最后返回总长度。

需要注意的是，getPreviousItemsLength函数也可以使用Array.prototype.reduce()方法来实现。

在提供的例子中，通过在模板中输出getIndex($parent.$index - 1, $index)的值，可以得到想要的索引值。

文章链接：https://stackoverflow.com/questions/15256600

0