如何在 ng-repeat 中使用 ng-click？

Question

我是 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 是在父范围（即测试控制器）中定义的。

但是，我只能在 Google 结果中找到无法正常工作的原因，但缺乏解决问题的方法。我应该如何更正我的代码以便 ng-click 起作用？有没有办法在 ng-repeat 范围内定义 myFunction 或者有没有办法告诉我想要父范围内的函数？

Answer 1

提高 ng-repeat 性能 - 使用 track by 和 ng-repeat

传递 $index 以跟踪您的 ng-repeat 以及正在点击的 ng-click

<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 的模板都很复杂）。这意味着大量的 DOM 操作。

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

追踪救援

在 Angular 1.2 中，对 ngRepeat 的语法做了一个新的补充：令人惊叹的逐句逐句跟踪。它允许您为 ngRepeat 指定自己的密钥来识别对象，而不仅仅是生成唯一的 ID。

这意味着您可以将上面的内容更改为 ng-repeat="task in tasks track by task.id" 并且由于您的原始任务和来自服务器的更新任务的 ID 相同 - ngRepeat 将知道不要重新创建 DOM 元素并重用它们。轰隆隆。

如果您的数据源有重复数据，您也可以使用“track by $index”

//下面的代码会抛出Error: dupes Duplicate Key in Repeater

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

//下面的代码可以正常工作

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

Answer 2

将ng-click改为关注

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