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

但是，我在谷歌搜索结果中找到的只是不工作的原因，但缺乏修复问题的方法。我该如何更正我的代码以便ng-click有效？有没有办法在ng-repeat范围内定义myFunction，或者有没有办法告诉我想要父范围内的函数？

Answer 1

请阅读问题下的评论。通过测试我的代码并发现代码有效，评论实际上做得更好。这有助于我意识到问题出在其他地方，结果证明我调用的函数被错误地放在实际代码中的子控制器下。

答案很好，但没有解决问题。值得一些阅读，但我宁愿不将它们标记为正确的答案，以免误导人。

Answer 2

将ng-click更改为以下

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

Answer 3

提高ng-repeat性能 - 使用track-with 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的语法进行了新的添加：令人惊讶的track by子句。它允许您指定自己的ngRepeat键来识别对象，而不是仅生成唯一ID。

这意味着您可以通过task.id＆＃34;将上述内容更改为任务跟踪中的ng-repeat =＆＃34;任务。并且由于原始任务和服务器中更新的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>

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

3 个答案: