本文翻譯自：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 »</a></li> <li><a href="/YtEdit/details/">YtEdit »</a></li> <li><a href="/GWeather/details/">GWeather »</a></li> <li role="separator" class="divider"></li> <li><a href="/WadStore/details/">WadStore »</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>