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

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

enter image description here

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

虽然数据库已经成功删除，但是我不能从范围中提取这个项目，而且我不想为客户机已经拥有的数据对服务器进行方法调用，我只想从范围中删除这个人。

有什么想法吗？

258848 次浏览
小开

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

$scope.persons.splice( $scope.persons.indexOf(person), 1 );
小开
最佳答案

你的问题不在于 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);
});
};
小开

我将使用具有有用函数列表的 下划线.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);
});

参见 小提琴中的演示。

小开

Angular 有一个称为 arrayRemove的内置函数，在你的例子中，方法可以简单地是:

arrayRemove($scope.persons, person)
小开 
$scope.removeItem = function() {
$scope.items.splice($scope.toRemove, 1);
$scope.toRemove = null;
};

这对我有用！

小开

如果有任何函数与 list 相关联，则在创建拼接函数时，也会删除该关联。我的解决办法是:

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

列表参数名为 物品。 参数 完成指示是否将删除该项。

另一个参考: 另一个例子

希望能帮到你，你好。

小开

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

啊，我发现了其中的原因... ... 我使用一个 block 方法通过查看 $scope.item 在表中创建两个列。对不起！

小开

你也可以用这个

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
小开 
array.splice(array.pop(item));
小开

从范围使用中删除元素:

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

来自 在这里输入链接描述


提交答案