AngularJS如何从范围中删除一个项目

简单的待办事项列表，但每个项目的列表页上有一个删除button！

1.相关模板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> 

2.相关控制方法：

 $scope.delete = function (person) { API.DeletePerson({ id: person.id }, function (success) { **// I NEED SOME CODE HERE TO PULL THE PERSON FROM MY SCOPE** }); }; 

我试了$ scope.persons.pull（人）

我试过$ scope.persons.remove（人）

虽然数据库删除成功，我不能从范围拉这个项目，我不想让客户端已经有数据的方法调用服务器，我只是想从范围中删除这个人。

有任何想法吗？

解：

1. 寻找索引是HTML中的正确方法：

2. 然而，只是改变angular度参数（idx）是不够的，我不得不创build一个人的实例发送到服务器删除。

    $scope.delete = function (idx) { var delPerson = $scope.persons[idx]; API.DeletePerson({ id: delPerson.id }, function (success) { $scope.persons.splice(idx, 1); }); }; 

多谢你们！

Angular是伟大的，我鼓励大家谁还没有检查出来！ };

Answer 1

你的问题是不是真的与Angular，但与数组方法。 从Array.splice删除特定项目的正确方法是使用Array.splice 。 另外，当使用ng-repeat时，你可以访问特殊的$index属性，它是你传入的数组的当前索引。

解决scheme其实很简单：

视图：

 <a ng-click="delete($index)">Delete</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); }); }; 

Answer 2

你将不得不在person数组中find人的索引，然后使用数组的splice方法：

 $scope.persons.splice( $scope.persons.indexOf(person), 1 ); 

Answer 3

我会使用Underscore.js库有良好的function列表

无（ DOC ）

without_.without（array，* values）返回删除所有值的实例的数组副本。

_.without（[1，2，1，0，3，1，4]，0，1）; => [2,3,4]

例

  var res = "deleteMe"; $scope.nodes = [{ name: "Node-1-1" }, { name: "Node-1-2" }, { name: "deleteMe" }]; $scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, {name: res})); 

请参阅小提琴演示

---

filter（ DOC ）

var evens = _.filter（[1，2，3，4，5，6]，函数（num）{return num％2 == 0;}）;

=> [2,4,6]

例

  $scope.newNodes = _.filter($scope.nodes, function(node) { return !(node.name == res); }); 

请参阅小提琴演示

Answer 4

 $scope.removeItem = function() { $scope.items.splice($scope.toRemove, 1); $scope.toRemove = null; }; 

这对我有用！

Answer 5

如果您有任何与列表相关的function，则在进行拼接function时，关联也会被删除。 我的解决scheme

 $scope.remove = function() { var oldList = $scope.items; $scope.items = []; angular.forEach(oldList, function(x) { if (! x.done) $scope.items.push( { [ DATA OF EACH ITEM USING oldList(x) ] }); }); }; 

列表参数是命名的项目 。 参数x.done表示该项目是否被删除。

另一个参考： 另一个例子

希望能帮到你。 问候。

Answer 6

对于@Joseph Silber的接受答案是行不通的，因为indexOf返回-1。 这可能是因为Angular添加了一个hashkey，这与我的$ scope.items [0]和我的项目不同。 我试图解决这与angular.toJson（）函数，但它没有工作:(

嗯，我find了原因…我使用块方法，通过观察我的$ scope.items在我的表中创build两列。 抱歉!

Answer 7

你也可以使用这个

 $scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) }); 

Answer 8

Angular有一个名为arrayRemove的内置函数，在这种情况下，方法可以简单地为：

 arrayRemove($scope.persons, person) 

Answer 9

 array.splice(array.pop(item));