在 ng-repeat 中向 ng-click 函数添加参数似乎不起作用
Posted
技术标签:
【中文标题】在 ng-repeat 中向 ng-click 函数添加参数似乎不起作用【英文标题】：Adding parameter to ng-click function inside ng-repeat doesn't seem to work 【发布时间】：2013-06-07 01:20:30 【问题描述】：我有一个带有ng-repeat 的简单循环，如下所示：
<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-click 字符串。
在这种情况下，ng-click 完全符合预期，即：ng-click="removeTask(5)". 但是......它什么也没做。
当然，我可以编写代码从 $tasks 数组甚至 DOM 中获取 task.id，但这似乎不像 Angular 的方式。
那么，如何在ng-repeat 循环内向ng-click 指令添加动态内容？
【问题讨论】：
【参考方案1】：代替
<button ng-click="removeTask(task.id)">remove</button>
这样做：
<button ng-click="removeTask(task.id)">remove</button>
请看这个小提琴：
http://jsfiddle.net/JSWorld/Hp4W7/34/
【讨论】：
+1：如果您的ng-click 表达式不使用方括号，这也适用，即 ng-click="taskData.currentTaskId = task.id"
谢谢先生..我看了很多博客，但我的问题已经被您的解决方案解决了。【参考方案2】：
真正让我着迷的一件事是，当我在浏览器中检查这个 html 时，并没有看到它扩展为以下内容：
<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>
【讨论】：
如果您的方法正在查找字符串，这将如何工作？ @Dinerdo 不会。要执行“removeTask(task)”，您必须更改方法以期望获取任务对象并从该对象获取 id 属性。【参考方案3】：同样值得注意的是，对于在搜索中找到此内容的人来说，这是...
<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）属性的字符串，但它没有用引号括起来。看起来 AngularJS 为我们处理了这些。我被挂断了几分钟。
【讨论】：
【参考方案4】：这行得通。谢谢。我正在注入自定义 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】：以上答案非常好。您可以查看以下完整代码示例，以便您确切知道如何使用
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" 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" class="img-responsive img-circle" style="width: 100%">
</a>
</div>
</div>
</div>
<!--ROW ENDS-->
</div>
</body>
</html>【讨论】：
【参考方案6】：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 );
;
]);
【讨论】：
【参考方案7】：这里是带有 ng click 功能的 ng 重复并用滑块追加
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope)
$scope.employees = [
'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 ,
'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 ,
'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 ,
'id': '004', 'name': 'Delta', 'joinDate': '09/11/2015', 'age': 19 ,
'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32
]
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function ()
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
);
</script>
</head>
<body>
<div class="container" ng-app="MyApp" ng-controller="MyController">
<input type="checkbox" value="checkbox1" ng-click="ShowHide()" /> checkbox1
<div id="mixedSlider">
<div class="MS-content">
<div class="item" ng-repeat="emps in employees" ng-show = "IsVisible">
<div class="subitem">
<p>emps.id</p>
<p>emps.name</p>
<p>emps.age</p>
</div>
</div>
</div>
<div class="MS-controls">
<button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
<button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/multislider.js"></script>
<script>
$('#mixedSlider').multislider(
duration: 750,
interval: false
);
</script>
【讨论】：
以上是关于在 ng-repeat 中向 ng-click 函数添加参数似乎不起作用的主要内容，如果未能解决你的问题，请参考以下文章
使用 ng-click 更改 ng-repeat 循环内的值
angular 中父元素ng-repeat后子元素ng-click失效
ng-repeat 内的 ng-click 不适用于 :focus 和 display