在ng-repeat里面添加参数到ng-click函数似乎不起作用
我有一个简单的循环与ng-repeat像这样：
<li ng-repeat='task in tasks'> <p> {{task.name}} <button ng-click="removeTask({{task.id}})">remove</button> </li>
控制器$scope.removeTask(taskID)有一个函数。
据我所知，Angular将首先呈现视图，并用一个数字replace插入的{{task.id}} ，然后在点击事件时，将评估ng-clickstring。
在这种情况下， ng-click会完全得到预期的结果，即： ng-click="removeTask(5)". 然而…这没有任何事情。
当然，我可以编写一个代码来从$tasks数组或甚至DOM获取task.id ，但是这看起来不像Angular方式。
那么，如何在ng-repeat循环中添加dynamic内容到ng-click指令呢？
代替
<button ng-click="removeTask({{task.id}})">remove</button>
做这个：
<button ng-click="removeTask(task.id)">remove</button>
请看这个小提琴：
有一件事情真的让我感到困扰，当时我在浏览器中检查了这个html，而不是把它扩展成如下forms：
<button ng-click="removeTask(1234)">remove</button>
我看见：
<button ng-click="removeTask(task.id)">remove</button>
但是，后者的作品！
这是因为你在“Angular World”里面，当在ng-click =“”时，angular度准备好了解task.id，就像你在模型里面一样。 不需要使用数据绑定，如{{}}。
此外，如果您想要传递任务对象本身，您可以：
<button ng-click="removeTask(task)">remove</button>
另外值得注意的是，对于在search中find这个的人来说，这是…
<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-click的值。 传递给goTo()的参数是绑定对象（ button ）属性的string，但不包含在引号中。 看起来像AngularJS为我们处理。 我挂了几分钟。
这工作。 谢谢。 我注入自定义的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);
以上答案是非常好的。 你可以看下面的完整的代码示例，以便你可以完全知道如何使用
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="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>
HTML：
<div ng-repeat="scannedDevice in ScanResult"> <!--GridStarts--> <div > <img ng-src={{'./assets/img/PlaceHolder/Test.png'}} <!--Pass Param--> ng-click="connectDevice(scannedDevice.id)" altSrc="{{'./assets/img/PlaceHolder/user_place_holder.png'}}" onerror="this.src = $(this).attr('altSrc')"> </div> </div>
Java脚本：
//Global Variables var ANGULAR_APP = angular.module('TestApp',[]); ANGULAR_APP .controller('TestCtrl',['$scope', function($scope) { //Variables $scope.ScanResult = []; //Pass Parameter $scope.connectDevice = function(deviceID) { alert("Connecting : "+deviceID ); }; }]);
