我有一个简单的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中删除id，但这看起来不像Angular的方式。
那么，如何将动态内容添加到ng-repeat循环内的ng-click指令?
当前回答
同样值得注意的是，对于那些在搜索中发现这个的人来说，这个…
<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()的参数是来自绑定对象(按钮)属性的字符串，但它没有被引号括起来。看起来AngularJS为我们处理了这个。我在这上面耽搁了几分钟。
其他回答
而不是
<button ng-click="removeTask({{task.id}})">remove</button>
这样做:
<button ng-click="removeTask(task.id)">remove</button>
请看这把小提琴:
http://jsfiddle.net/JSWorld/Hp4W7/34/
同样值得注意的是，对于那些在搜索中发现这个的人来说，这个…
<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()的参数是来自绑定对象(按钮)属性的字符串，但它没有被引号括起来。看起来AngularJS为我们处理了这个。我在这上面耽搁了几分钟。
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 repeat with ng click函数，并使用滑块添加
<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>
有一件事真的让我很困扰，当我在浏览器中检查这个html时，并没有看到它扩展成这样:
<button ng-click="removeTask(1234)">remove</button>
我看到:
<button ng-click="removeTask(task.id)">remove</button>
然而，后者是可行的!
这是因为你在“Angular世界”中，当你在ng-click=""里面时，Angular已经知道任务了。我就像你在模型里一样。不需要像{{}}那样使用数据绑定。
此外，如果你想传递任务对象本身，你可以喜欢:
<button ng-click="removeTask(task)">remove</button>
