在ng-repeat内部的ng-click函数中添加参数似乎不起作用

本文翻译自：Adding parameter to ng-click function inside ng-repeat doesn't seem to work

I have a simple loop with ng-repeat like this: 我有一个类似ng-repeat的简单循环：

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

There is a function in the controller $scope.removeTask(taskID) . 控制器$scope.removeTask(taskID)有一个函数。

As far as I know Angular will first render the view and replace interpolated {{task.id}} with a number, and then, on click event, will evaluate ng-click string. 据我所知，Angular将首先渲染视图并用数字替换插值的{{task.id}} ，然后在click事件中评估ng-click字符串。

In this case ng-click gets totally what is expected, ie: ng-click="removeTask(5)". 在这种情况下， ng-click会完全获得预期的效果，即： ng-click="removeTask(5)". However... it's not doing anything. 但是...什么也没做。

Of course I can write a code to get task.id from the $tasks array or even the DOM, but this does not seem like the Angular way. 当然，我可以编写代码从$tasks数组甚至DOM中获取task.id ，但这似乎不是Angular的方式。

So, how can one add dynamic content to ng-click directive inside a ng-repeat loop? 因此，如何在ng-repeat循环内向ng-click指令添加动态内容？

---

#1楼

参考：https://stackoom.com/question/19UrW/在ng-repeat内部的ng-click函数中添加参数似乎不起作用

---

#2楼

Instead of 代替

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

do this: 做这个：

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

Please see this fiddle: 请看这个小提琴：

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

---

#3楼

One thing that really hung me up, was when I inspected this html in the browser, instead of seeing it expanded to something like: 真正让我烦恼的一件事是，我在浏览器中检查了该html，而不是看到它扩展为：

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

I saw: 我看见：

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

However, the latter works! 但是，后者有效！

This is because you are in the "Angular World", when inside ng-click="" Angular all ready knows about task.id as you are inside it's model. 这是因为您在“ Angular World”中，当您在ng-click =“” Angular中时，就如同在其模型中一样，都已经知道task.id。 There is no need to use Data binding, as in {{}}. 无需像{{}}中那样使用数据绑定。

Further, if you wanted to pass the task object itself, you can like: 此外，如果您想传递任务对象本身，则可以执行以下操作：

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

---

#4楼

this works. 这可行。 thanks. 谢谢。 I am injecting custom html and compile it using angular in the controller. 我正在注入自定义html并在控制器中使用angular对其进行编译。

        var tableContent= '<div>Search: <input ng-model="searchText"></div>' 
                            +'<div class="table-heading">'
                            +    '<div class="table-col">Customer ID</div>'
                           + ' <div class="table-col" ng-click="vm.openDialog(c.CustomerId)">{{c.CustomerId}}</div>';

            $timeout(function () {
            var linkingFunction = $compile(tableContent);
            var elem = linkingFunction($scope);

            // You can then use the DOM element like normal.
            jQuery(tablePanel).append(elem);

            console.log("timeout");
        },100);

---

#5楼

Also worth noting, for people who find this in their searches, is this... 对于在搜索中找到此内容的人来说，这也值得一提...

<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>

Note the value of ng-click . 注意ng-click的值。 The parameter passed to goTo() is a string from a property of the binding object (the button ), but it is not wrapped in quotes. 传递给goTo()的参数是绑定对象（ button ）的属性中的字符串，但没有用引号引起来。 Looks like AngularJS handles that for us. 看起来AngularJS为我们处理了这个问题。 I got hung up on that for a few minutes. 我挂了几分钟。

---

#6楼

Above answers are excellent. 以上答案非常好。 You can look at the following full code example so that you could exactly know how to use 您可以看下面的完整代码示例，以便您确切地知道如何使用

  var app = angular.module('hyperCrudApp', []); app.controller('usersCtrl', function($scope, $http) { $http.get("https://jsonplaceholder.typicode.com/users").then(function (response) { console.log(response.data) $scope.users = response.data; $scope.setKey = function (userId){ alert(userId) if(localStorage){ localStorage.setItem("userId", userId) } else { alert("No support of localStorage") return } }//function closed }); }); 

  #header{ color: green; font-weight: bold; } 

  <!DOCTYPE html> <html> <head> <title>HyperCrud</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <!-- NAVBAR STARTS --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">HyperCrud</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apps<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/qAlarm/details/">qAlarm &raquo;</a></li> <li><a href="/YtEdit/details/">YtEdit &raquo;</a></li> <li><a href="/GWeather/details/">GWeather &raquo;</a></li> <li role="separator" class="divider"></li> <li><a href="/WadStore/details/">WadStore &raquo;</a></li> <li><a href="/chatsAll/details/">chatsAll</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/login/">Login</a></li> <li><a href="/register/">Register</a></li> <li><a href="/services/">Services<span class="sr-only">(current)</span></a></li> </ul> </div> </div> </nav> <!--NAVBAR ENDS--> <br> <br> <div ng-app="hyperCrudApp" ng-controller="usersCtrl" class="container"> <div class="row"> <div class="col-sm-12 col-md-12"> <center> <h1 id="header"> Users </h1> </center> </div> </div> <div class="row" > <!--ITERATING USERS LIST--> <div class="col-sm-6 col-md-4" ng-repeat="user in users"> <div class="thumbnail"> <center> <img src="https://cdn2.iconfinder.com/data/icons/users-2/512/User_1-512.png" alt="Image - {{user.name}}" class="img-responsive img-circle" style="width: 100px"> <hr> </center> <div class="caption"> <center> <h3>{{user.name}}</h3> <p>{{user.email}}</p> <p>+91 {{user.phone}}</p> <p>{{user.address.city}}</p> </center> </div> <div class="caption"> <a href="/users/delete/{{user.id}}/" role="button" class="btn btn-danger btn-block" ng-click="setKey(user.id)">DELETE</a> <a href="/users/update/{{user.id}}/" role="button" class="btn btn-success btn-block" ng-click="setKey(user.id)">UPDATE</a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <a href="/regiser/"> <img src="http://img.bhs4.com/b7/b/b7b76402439268b532e3429b3f1d1db0b28651d5_large.jpg" alt="Register Image" class="img-responsive img-circle" style="width: 100%"> </a> </div> </div> </div> <!--ROW ENDS--> </div> </body> </html>