如何从angular.js数组中删除元素/节点
我试图从数组$scope.items删除元素，以便在视图中删除项目ng-repeat="item in items"
只是为了说明的目的，这里是一些代码：
for(i=0;i<$scope.items.length;i++){ if($scope.items[i].name == 'ted'){ $scope.items.shift(); } }
如果名称正确，我想从视图中删除第一个元素？ 它工作正常，但视图重新加载所有的元素。 因为所有的数组键已经移动。 这是在我创build的移动应用程序中造成不必要的延迟
任何人有解决这个问题？
从arrays中删除项目没有火箭科学。 要从任何数组中删除项目，您需要使用splice ： $scope.items.splice(index, 1); 。 这里是一个例子 ：
HTML
<!DOCTYPE html> <html data-ng-app="demo"> <head> <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div data-ng-controller="DemoController"> <ul> <li data-ng-repeat="item in items"> {{item}} <button data-ng-click="removeItem($index)">Remove</button> </li> </ul> <input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button> </div> </body> </html>
JavaScript的
"use strict"; var demo = angular.module("demo", []); function DemoController($scope){ $scope.items = [ "potatoes", "tomatoes", "flour", "sugar", "salt" ]; $scope.addItem = function(item){ $scope.items.push(item); $scope.newItem = null; } $scope.removeItem = function(index){ $scope.items.splice(index, 1); } }
对于任何人回到这个问题。 从数组中删除项目的正确的“Angular Way”是$ filter。 只需将$ filter注入到控制器中，然后执行以下操作：
$scope.items = $filter('filter')($scope.items, {name: '!ted'})
你不需要加载任何额外的库或诉诸JavaScript原语。
你可以使用普通的javascript – Array.prototype.filter（）
$scope.items = $scope.items.filter(function(item) { return item.name !== 'ted'; });
因为当你在一个数组上shift()时，它会改变数组的长度。 所以for循环将被搞乱。 您可以从头到尾循环以避免此问题。
顺便说一句，我假设你尝试删除位置我的元素，而不是数组的第一个元素。 （ $scope.items.shift();在你的代码中将删除数组的第一个元素）
for(var i = $scope.items.length - 1; i >= 0; i--){ if($scope.items[i].name == 'ted'){ $scope.items.splice(i,1); } }
这里是filter与下划线库可能会帮助你，我们删除名为“特德”的项目
$scope.items = _.filter($scope.items, function(item) { return !(item.name == 'ted'); });
只是在“angular度”解决scheme略有扩展。 我想根据它的数字ID排除一个项目，所以！ 方法不起作用。 应该用于{name：'ted'}或{id：42}的更一般的解决scheme是：
mycollection = $filter('filter')(myCollection, { id: theId }, function (obj, test) { return obj !== test; });
我喜欢@madhead提供的解决scheme
然而，我的问题是，它不会工作的sorting列表，而不是传递索引到删除函数，我传递的项目，然后通过索引获得索引
例如：
var index = $scope.items.indexOf(item); $scope.items.splice(index, 1);
madheads示例的更新版本如下： 链接到示例
HTML
<!DOCTYPE html> <html data-ng-app="demo"> <head> <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div data-ng-controller="DemoController"> <ul> <li data-ng-repeat="item in items|orderBy:'toString()'"> {{item}} <button data-ng-click="removeItem(item)">Remove</button> </li> </ul> <input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button> </div> </body> </html>
JavaScript的
"use strict"; var demo = angular.module("demo", []); function DemoController($scope){ $scope.items = [ "potatoes", "tomatoes", "flour", "sugar", "salt" ]; $scope.addItem = function(item){ $scope.items.push(item); $scope.newItem = null; } $scope.removeItem = function(item){ var index = $scope.items.indexOf(item); $scope.items.splice(index, 1); } }
我的解决scheme（这没有造成任何性能问题）：
- 用remove方法扩展数组对象（我相信你不止一次需要它）：
Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); };
我在我的所有项目中都使用它，并将学分转到John Resig John Resig的网站
- 使用forEach和一个基本的检查：
$scope.items.forEach(function(element, index, array){ if(element.name === 'ted'){ $scope.items.remove(index); } });
最后，$ digest将以angularjs触发，我的UI立即更新，没有任何可识别的延迟。
如果您有任何与列表相关的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表示该项目是否被删除。 希望能帮到你。 问候。
使用indexOf函数不会在我的REST资源集合上进行裁剪。
我不得不创build一个函数来检索坐在资源集合中的资源的数组索引：
factory.getResourceIndex = function(resources, resource) { var index = -1; for (var i = 0; i < resources.length; i++) { if (resources[i].id == resource.id) { index = i; } } return index; } $scope.unassignedTeams.splice(CommonService.getResourceIndex($scope.unassignedTeams, data), 1);
我的解决scheme非常简单
app.controller('TaskController', function($scope) { $scope.items = tasks; $scope.addTask = function(task) { task.created = Date.now(); $scope.items.push(task); console.log($scope.items); }; $scope.removeItem = function(item) { // item is the index value which is obtained using $index in ng-repeat $scope.items.splice(item, 1); } });
我的物品有唯一的ID。 我正在用angulars过滤模型来删除一个$filter service：
var myModel = [{id:12345, ...},{},{},...,{}]; ... // working within the item function doSthWithItem(item){ ... myModel = $filter('filter')(myModel, function(value, index) {return value.id !== item.id;} ); }
作为id，你也可以使用你的模型项目的$$ hashKey属性： $$hashKey:"object:91"
