为啥 ng-click 需要通过 $index 跟踪才能在嵌套的 ng-repeat 内触发

Posted 2023-02-19

【中文标题】为啥 ng-click 需要通过 $index 跟踪才能在嵌套的 ng-repeat 内触发

【英文标题】：Why track by $index is necessary for ng-click to trigger inside nested ng-repeat为什么 ng-click 需要通过 $index 跟踪才能在嵌套的 ng-repeat 内触发

【发布时间】：2016-05-05 13:53:08

【问题描述】：

我在嵌套的ng-repeat 中使用ng-click，但发现最里面的 ng-click(3rd level) 没有被触发。 但是当我将track by $index 用于最里面的 ng-repeat 时，触发了 ng-click。 我无法理解嵌套 ng-repeat 的这种行为。

请在下面找到代码sn-p

<ul class="a">
    <li class="b" ng-repeat="items in Objects track by $index" ng-click="callSomething()">
        <a>items.name</a>
        <ul class="c">
            <li class="d" ng-repeat="items1 in Objects1 track by $index" ng-click="callSomething()">
                <a>items1.name</a>
                <ul class="e">
                    <li class="f" ng-repeat="items2 in Objects3 track by $index" ng-click="callSomething()">
                        <a>items3.name</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

【问题讨论】：

如果你想深入了解，请发布你的对象并调用Something函数。我的简单测试效果很好。另请注意，当您单击最里面的元素时，您将调用 callSomething 三次，除非您停止事件传播。或者您可以利用这一点并仅在顶层处理所有事件（跳过内部 ng-click，这称为委托）。

抱歉 Oleg 由于保密原因，我无法发布对象和方法。但是我的对象具有非常简单的结构（id、name、childObject）并且 callSomething 仅过滤对象选择上的数据

获取点击的实际元素的方式可能有所不同。您可以直接传递 id（如 callSomething(items.id) 或传递事件（callSomething($event) 和稍后在 callSomething(e)e.target) 等）。ng-repeat 实际上使用 track by 来关注更改并重建结构，并且如果没有明确设置，它仍然有某种内部 ID。

@PranjalDiwedi 您不必发布实际数据，您可以发布一些类似结构的虚拟数据。见minimal reproducible example

【参考方案1】：

它确实与 ng-repeat 行为有关。每个元素都被唯一地跟踪并映射到范围。我认为这个帖子已经回答了你的问题：

How does ng-repeat work?