154

简单的待办事项列表，但在每个项目的列表页面上都有一个删除按钮：

在此处输入图像描述

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

相关控制器方法：

$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(person)了$scope.persons.remove(person)。

尽管数据库已成功删除，但我无法从范围中提取此项目，并且我不想为客户端已经拥有的数据对服务器进行方法调用，我只想将这个人从范围中删除。

有任何想法吗？

4

10 回答 10

311

您必须找到数组person中的索引persons，然后使用数组的splice方法：

$scope.persons.splice( $scope.persons.indexOf(person), 1 );
于 2013-01-10T04:08:33.613 回答
260

您的问题不在于 Angular，而在于 Array 方法。从数组中删除特定项目的正确方法是使用Array.splice. 此外，当使用 ng-repeat 时，您可以访问特殊$index属性，即您传入的数组的当前索引。

解决方案实际上非常简单：

看法：

<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);
  });
};
于 2013-01-10T04:11:21.660 回答
8

我会使用包含有用函数列表的Underscore.js库。

without

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
}));

请参阅JSFiddle中的演示。

filter

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

// => [2, 4, 6]

例子

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

请参阅Fiddle中的演示。

于 2013-07-02T09:32:00.993 回答
7 
$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

这对我有用！

于 2013-09-11T18:07:47.197 回答
4

如果您有任何与列表关联的功能，当您制作拼接功能时，关联也会被删除。我的解决方案：

$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) ] });
    });
};

列表参数名为items。参数x.done指示该项目是否将被删除。

另一个参考：另一个例子

希望能帮到你。问候。

于 2014-09-04T12:33:03.477 回答
2

对于@Joseph Silber 的公认答案不起作用，因为 indexOf 返回-1。这可能是因为 Angular 添加了一个哈希键，这对于我的 $scope.items[0] 和我的项目是不同的。我试图用 angular.toJson() 函数解决这个问题，但它不起作用:(

啊，我找到了原因……我使用块方法通过查看我的 $scope.items 在我的表中创建两列。对不起！

于 2015-04-14T18:29:08.177 回答
2

你也可以使用这个

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
于 2016-01-04T09:05:46.373 回答
1

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

arrayRemove($scope.persons, person)
于 2013-08-01T05:37:52.157 回答
1 
array.splice(array.pop(item));
于 2016-05-20T22:44:55.520 回答
0

要从范围中删除元素，请使用：

// remove an item
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    };

从此处输入链接描述

于 2018-03-02T07:43:49.080 回答