在ng repeat中向ng click函数添加参数似乎不起作用

Question

我有一个简单的循环与ng-重复像这样：

<li ng-repeat='task in tasks'>
  <p> {{task.name}}
  <button ng-click="removeTask({{task.id}})">remove</button>
</li>

控制器$scope中有一个函数。removeTask（taskID）。

据我所知，Angular将首先呈现视图，并用数字替换插值的{{task.id}}，然后，在单击事件中，将计算ng-单击字符串。

在这种情况下，ng click完全获得预期效果，即：ng click=“removeTask（5）” 但是。。。它什么也没做。

当然，我可以编写代码来获取任务。id来自$tasks数组，甚至来自DOM，但这看起来不像是有角度的方式。

那么，如何在ng repeat循环中向ng click指令添加动态内容呢？




Answer 1

同样值得注意的是，对于在搜索中发现这一点的人来说，这是...

<div ng-repeat="button in buttons" class="bb-button" ng-click="goTo(button.path)">
  <div class="bb-button-label">{{ button.label }}</div>
  <div class="bb-button-description">{{ button.description }}</div>
</div>

注意ng的值，单击。传递给goTo（）的参数是绑定对象（按钮的属性）属性中的字符串，但它没有用引号括起来。看起来AngularJS帮我们处理了。我被挂了几分钟。

Answer 2

有一件事真的挂我，当我在浏览器中检查这个html，而不是看到它扩展到这样的东西：

<button ng-click="removeTask(1234)">remove</button>

我看到了：

<button ng-click="removeTask(task.id)">remove</button>

然而，后者是有效的！

这是因为你是在"Angular World"，当里面ng-单击=""Angular所有准备好知道task.id因为你在里面它的模型。没有必要使用数据绑定，如{{}}。

此外，如果您希望传递任务对象本身，您可以：

<button ng-click="removeTask(task)">remove</button>

Answer 3

而不是

<button ng-click="removeTask({{task.id}})">remove</button>

这样做：

<button ng-click="removeTask(task.id)">remove</button>

请看这把小提琴：

http://jsfiddle.net/JSWorld/Hp4W7/34/