我想从数组 $scope.items 中删除元素，以便在视图中 ng-repeat="item in items" 中删除项目。
以下是一些演示用代码：
for(i=0;i<$scope.items.length;i++){
if($scope.items[i].name == 'ted'){
$scope.items.shift();
}
}
如果视图中有名称为Ted，我想要删除第一个元素。虽然它可以正常运行，但是因为所有的数组键都发生了移动，所以视图重新加载了所有元素，这在我创建的移动应用程序中造成了不必要的延迟。
是否有人对此问题有解决方案？
从数组中删除元素没有什么复杂的技巧。想要从任何数组中删除元素，你需要使用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);
}
}
$index 不一定与 $scope.items 的索引相匹配。特别是当您使用 orderBy 或 filter 时。我认为使用 $index 是不可伸缩的，并且可能很危险。 - Antoine Pinsard对于任何回到这个问题的人。正确的“Angular方式”从数组中删除项目是使用 $filter。只需将 $filter 注入您的控制器，然后执行以下操作：
对于任何回到这个问题的人。从数组中删除项的正确“Angular方式”是使用 $filter。只需将 $filter 注入您的控制器，然后执行以下操作：
$scope.items = $filter('filter')($scope.items, {name: '!ted'})
您不需要加载任何额外的库或使用JavaScript原语。
$filter('filter')($scope.items, {name: '!ted'}, true)，请参见 https://docs.angularjs.org/api/ng/filter/filter。 - Betty St$filter('filter')($scope.items, {id: 42}, true); 可以找到该元素，但我还没有找到否定它的方法，因为 {id: "!42"} 是一个字符串而不是数字。 - Oscar$filter('filter')($scope.items, function(value, index) {return value.id !== 42;}); жҳҜжңүж•Ҳзҡ„гҖӮ ж¶ҰиүІеҗҺзҡ„зҝ»иҜ‘пјҡиҝҷж®өд»Јз ҒеҸҜд»ҘиҝҮж»ӨжҺү $scope.items ж•°з»„дёӯ id дёҚзӯүдәҺ 42 зҡ„е…ғзҙ гҖӮ - Oscar你可以使用纯粹的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);
}
}
这里有一个使用 Underscore 库 的 filter 函数可能会对您有帮助，我们可以删除名称为 "ted" 的项目。
$scope.items = _.filter($scope.items, function(item) {
return !(item.name == 'ted');
});
$scope.items = $filter('filter').filter($scope.items, {name: '!ted'}) - bpaul$scope.items = $filter('filter')($scope.items, {name: '!ted'})。 - Eugene我喜欢@madhead提供的解决方案。
然而，我的问题是它不能用于已排序的列表。因此，我没有将索引传递给删除函数，而是传递了项，然后通过indexof获取索引。
例如：
var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);
<!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);
}
}
稍微扩展一下“angular”解决方案。我想根据其数字 ID 排除一个项目，因此“！”方法不起作用。 更通用的解决方案适用于 { name: 'ted' } 或 { id: 42 }：
mycollection = $filter('filter')(myCollection, { id: theId }, function (obj, test) {
return obj !== test; });
我对此的解决方案（没有引起任何性能问题）：
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的网站
$scope.items.forEach(function(element, index, array){
if(element.name === 'ted'){
$scope.items.remove(index);
}
});
在AngularJS中，$digest结束后，我的UI会立即更新，而且没有任何明显的延迟。
index仍将反映原始数组中的索引，但在当前$scope.items中相同项的索引将对已移除的每个前置项减少一个值。因此，虽然使用forEach迭代时删除项目是安全的，但在回调中提供的索引使用它则是不安全的。 - Chris Schallerapp.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);
}
});
在我的 REST 资源集合中使用 indexOf 函数效果不佳。
我不得不创建一个函数，用于检索资源集合中某个资源的数组索引：
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);