【发布时间】: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
标签: javascript jquery angularjs ng-repeat angularjs-ng-click