我有一个简单的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指令?
有一件事真的让我很困扰,当我在浏览器中检查这个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>
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 );
};
}]);