如何从AngularJS的范围中删除项目? [英] How to remove an item from scope in AngularJS?
问题描述
简单的待办事项列表,但每个项目的列表页面上都有一个删除按钮:
p>
相关模板HTML:
< tr ng-repeat =person在人中>
< td> {{person.name}} - #{{person.id}}< / td>
< td> {{person.description}}< / td>
< td nowrap = nowrap>
< a href =#!/ edit>< i class =icon-edit>< / i>< / a>
< / td>
< / tr>
相关控制器方法:
$ scope.delete = function(person){
API.DeletePerson({id:person.id},function(success){
//我需要一些代码从我的范围拉人。
});
};
我试过 $ scope.persons.pull(person)
和 $ scope.persons.remove(person)
。
虽然数据库删除成功,但我可以不从范围中拉出这个项目,我不想为客户端已有的数据调用服务器的方法,我只想从范围中移除这个人。
任何想法?
您的问题与Angular不同,但使用Array方法。从数组中删除特定项目的正确方法是使用 方法Array.splice
。此外,使用ng-repeat时,您可以访问特殊的 $ index
属性,该属性是您传入的数组的当前索引。
解决方案实际上非常简单:
查看:
< a ng-click =delete($ index)>删除< / a>
控制器:
$ scope.delete = function(idx){
var person_to_delete = $ scope.persons [idx];
API.DeletePerson({id:person_to_delete.id},function(success){
$ scope.persons.splice(idx,1);
});
};
Simple to-do list, but with a delete button on list page for each item:
Relevant template HTML:
<tr ng-repeat="person in persons">
<td>{{person.name}} - # {{person.id}}</td>
<td>{{person.description}}</td>
<td nowrap=nowrap>
<a href="#!/edit"><i class="icon-edit"></i></a>
<button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
</td>
</tr>
Relevant controller method:
$scope.delete = function (person) {
API.DeletePerson({ id: person.id }, function (success) {
// I need some code here to pull the person from my scope.
});
};
I tried $scope.persons.pull(person)
and $scope.persons.remove(person)
.
Although the database deleted successfully, I can not pull this item from scope and I do not want to make a method call to the server for data the client already has, I just want to remove this one person from scope.
Any ideas?
Your issue is not really with Angular, but with Array methods. The proper way to remove a particularly item from an array is with Array.splice
. Also, when using ng-repeat, you have access to the special $index
property, which is the current index of the array you passed in.
The solution is actually pretty straightforward:
View:
<a ng-click="delete($index)">Delete</a>
Controller:
$scope.delete = function ( idx ) {
var person_to_delete = $scope.persons[idx];
API.DeletePerson({ id: person_to_delete.id }, function (success) {
$scope.persons.splice(idx, 1);
});
};
这篇关于如何从AngularJS的范围中删除项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!