如何在ng repeat中使用ng click

How to use ng-click in ng-repeat?

本文关键字：ng click repeat      更新时间：2023-09-26

我是Angular JS的新手，我正在尝试使用ng repeat在我的表中生成多行，每行中都应该有一个按钮来触发具有不同参数的函数

<div ng-controller="testing">
    <table>
        <thead>
             <tr>
                  <th>col 1</th>
                  <th>col 2</th>
                  <th>button</th>        
             </tr>
        </thead>
        <tbody>
             <tr ng-repeat="item in items">
                 <td>{{ item.prop1 }}</td>
                 <td>{{ item.prop2 }}</td>
                 <td><button ng-click="myFunction(item.id)">Trigger Function</button></td>
             </tr>
        </tody>
    </table>
</div>

这当然不起作用，因为ng repeat创建了自己的作用域，而myFunction是在父作用域（即测试控制器）中定义的。

然而，我在谷歌的结果中只能找到不起作用的原因，但缺乏解决问题的方法。我应该如何更正我的代码，以便ng-click正常工作？有没有办法在ng重复作用域内定义myFunction，或者有没有办法告诉我希望函数在父作用域中？

将ng-click更改为以下

<button ng-click="testing.myFunction(item.id)">

通过ng重复使用track来提高ng重复性能

通过$index来跟踪你的ng重复和哪个ng点击被点击

<tr ng-repeat="item in items track by $index"> <td>{{ item.prop1 }}</td> <td>{{ item.prop2 }}</td> <td><button ng-click="myFunction($index,item.id)">Trigger Function</button></td> </tr>

供参考

使用Angular做的第一件事可能就是如何使用ngRepeat。它如此简单，你一定会喜欢它。下面是一个例子：

<ul class="tasks"> <li ng-repeat="task in tasks" ng-class="{done: task.done}"> {{task.id}}: {{task.title}} </li> </ul>

问题

现在假设你在列表上方有一个按钮来刷新它

这种刷新的明显实现方式是在您的控制器中沿着以下几条线：

$scope.tasks = newTasksFromTheServer;

这是一段琐碎的代码，但它会导致ngRepeat删除现有任务的所有li元素并重新创建它们，这可能会很昂贵（例如，我们有很多li元素，或者每个li的模板都很复杂）。这意味着要进行大量的DOM操作。

Angular为什么要这么做？在幕后，ngRepeat为每个任务添加了$$hashKey属性以跟踪它。如果你用服务器上的新任务对象替换原始任务，即使这些对象实际上与你的原始任务完全相同，它们也不会有$$hashKey特性，因此ingRepeat不会知道它们代表相同的元素。

跟踪营救

在Angular 1.2中，对ngRepeat的语法进行了新的添加：令人惊叹的trackby子句。它允许您为ngRepeat指定自己的密钥来识别对象，而不仅仅是生成唯一的ID。

这意味着您可以将上面的内容更改为ng-reeat="tasks-in-tasks-track-by-task.id"，并且由于id在原始任务和服务器更新的任务中都是相同的，ng-Reeat将知道不要重新创建DOM元素并重用它们。繁荣

如果你的数据源有重复的数据，你也可以使用"跟踪$index"

//以下代码将抛出错误：在中继器中重复密钥

<div ng-repeat="value in [4, 4]"></div>

//下面的代码将工作得非常好

<div ng-repeat="value in [4, 4] track by $index"></div>

相关文章：