如何从AngularJS中的范围中删除项目？

Question

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

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

虽然数据库已成功删除，但我无法从作用域中提取此项目，并且我不想对客户端已有的数据进行服务器方法调用，我只想从范围中删除此人。

有什么想法吗？

Answer 1

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

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

Answer 2

您的问题不是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);
  });
};

Answer 3

我会使用包含有用函数列表的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中的演示。

Answer 4

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

这适合我！

Answer 5

如果您具有与列表关联的任何功能，则在创建拼接功能时，也会删除关联。我的解决方案：

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

列表参数名为项目。 param x.done 表示该项目是否会被删除。

另一个参考文献：Another example

希望能帮助你。问候。

Answer 6

对于@Joseph的接受答案，Silber无效，因为indexOf返回-1。这可能是因为Angular添加了一个hashkey，这对我的$ scope.items [0]和我的项目来说是不同的。我尝试使用angular.toJson（）函数解决这个问题，但它不起作用：（

啊，我发现原因...我使用chunk方法通过观察我的$ scope.items在我的表中创建两列。遗憾！

Answer 7

您也可以使用此

console.log($scope.data);

Answer 8

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

arrayRemove($scope.persons, person)

Answer 9

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

Answer 10

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

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

来自enter link description here