在 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 将首先呈现视图并将内插的 {{task.id}} 替换为数字，然后在点击事件时评估 ng-click 字符串。
在这种情况下，ng-click 完全符合预期，即：ng-click="removeTask(5)". 但是......它没有做任何事情。
当然，我可以编写代码从 $tasks 数组甚至 DOM 中获取 task.id，但这似乎不像 Angular 方式。
那么，如何在 ng-repeat 循环内将动态内容添加到 ng-click 指令？
代替
<button ng-click="removeTask({{task.id}})">remove</button>
做这个：
<button ng-click="removeTask(task.id)">remove</button>
请看这个小提琴：
http://jsfiddle.net/JSWorld/Hp4W7/34/
真正让我感到困惑的一件事是，当我在浏览器中检查这个 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>
同样值得注意的是，对于在搜索中找到此内容的人来说，这是...
<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 为我们处理了这些。我被挂断了几分钟。
这行得通。谢谢。我正在注入自定义 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("不支持 localStorage ") return } }//函数关闭 }); }); #header{ 颜色：绿色；字体粗细：粗体； }
用户
{{user.name}}
{{user.email}}
+91 {{user.phone}}
{{user.address.city}}
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 );
};
}]);
这是带有 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-click表达式不使用括号，这也有效，即ng-click="taskData.currentTaskId = task.id"