我试图写一个函数,使我能够删除一个项目时,按钮被点击,但我认为我与函数混淆-我使用$digest吗?
HTML & app.js:
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
要删除项,您需要从数组中删除它,并可以将bday项传递给标记中的删除函数。然后在控制器中查找项目的索引并从数组中删除
<a class="btn" ng-click="remove(item)">Delete</a>
然后在控制器中:
$scope.remove = function(item) {
var index = $scope.bdays.indexOf(item);
$scope.bdays.splice(index, 1);
}
Angular会自动检测bdays数组的变化,并更新ng-repeat
演示:http://plnkr.co/edit/ZdShIA?p=preview
编辑:如果使用服务器进行实时更新,将使用您使用$resource创建的服务来管理数组更新,同时更新服务器
要删除项,您需要从数组中删除它,并可以将bday项传递给标记中的删除函数。然后在控制器中查找项目的索引并从数组中删除
<a class="btn" ng-click="remove(item)">Delete</a>
然后在控制器中:
$scope.remove = function(item) {
var index = $scope.bdays.indexOf(item);
$scope.bdays.splice(index, 1);
}
Angular会自动检测bdays数组的变化,并更新ng-repeat
演示:http://plnkr.co/edit/ZdShIA?p=preview
编辑:如果使用服务器进行实时更新,将使用您使用$resource创建的服务来管理数组更新,同时更新服务器
这是另一个答案。我希望它能有所帮助。
<a class="btn" ng-click="delete(item)">Delete</a>
$scope.delete(item){
var index = this.list.indexOf(item);
this.list.splice(index, 1);
}
array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)
完整的源代码在这里
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice