AngularJS：在嵌套循环中使用ng-repeat track by $index

Question

我需要一个嵌套ng-repeat循环的第二个$index。 我应该在哪里放置它？

AngularJS网站上说：

  

可以使用ngInit为这些属性创建别名，当嵌套ngRepeats时可能会有用。

<div ng-repeat="person in persons track by $index">
    <div ng-repeat="something in array track by $index2"> <!-- where to init this and how to manage it?-->

如果我再次使用$index，似乎可以工作，但我不确定这是否正确？我相信有一种简单而正确的方法来做到这一点，只是我找不到例子。

谢谢

- trainoasis

Answer 1

$index将引用最内层的ngRepeat作用域中的索引，因此如果这是您所需要的，您可以直接使用它。

文档描述的是一种需要在父级ngRepeat中访问$index的情况。您可以通过以下几种方式来获取它：一种是使用$parent，另一种是使用ngInit，正如Angular文档所建议的那样。以下是一个示例...

<li ng-repeat="thing in things" ng-init="parentIndex = $index">
    {{ $index }}
    <ul>
        <li ng-repeat="value in thing.values">
            {{ value }} 
            {{ $index }} <!-- inner $index -->
            {{ $parent.$index }} <!-- parent $index -->
            {{ parentIndex }} <!-- also parent $index -->
        </li>
    </ul>
</li>

Fiddle

- Anthony Chu

---

正是我想知道的。文档有点让人困惑。谢谢你。 - trainoasis

值得注意的是，它适用于任何可用的JavaScript对象。我使用它为外部循环的$last布尔值创建了一个别名，以便在内部循环中使用。 - Skurpi

如果您打算从数组中删除任何列表项，请非常小心使用此方法。例如，如果您从数组“things”中删除任何数组项，则$index将更新自身以反映数组的新状态，但“parentIndex”仍将指向已删除项的索引。这在进行删除操作时会造成巨大问题。一旦保存状态并刷新页面（即必须重新呈现数组列表以显示更新后的索引），则“parentIndex”将正确反映。我在苦苦挣扎了3天后才发现这一点。 - Devner

我有一个复杂的结构，其中我使用嵌套的For循环创建表单。对我来说，“ng-init”解决了这个问题。谢谢。 - mulla.azzi

谢谢这个。简直不敢相信我会在2022年被雇用并且使用AngularJS工作，但是没错，这个保存了我的嵌套重复自定义指令。再次感谢。 - leipzy

无法强调@Devner警告的重要性，如果您正在基于索引从数组中删除对象，则不应使用此方法。它不起作用。我曾经遇到过同样的问题。 - Push W.