如何从 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();
}
}

I want to remove the 1st element from the view if there is the name ted right? It works fine, but the view reloads all the elements. Because all the array keys have shifted. This is creating unnecessary lag in the mobile app I am creating..

有人有办法解决这个问题吗？

273532 次浏览
小开
最佳答案

从数组中删除项目没有什么复杂的技术。要从任何数组中删除项，您需要使用 splice: $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">
\{\{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);
}
}
小开

因为当对数组执行 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与 Underscore library可能会帮助你，我们删除项目的名称“泰德”

$scope.items = _.filter($scope.items, function(item) {
return !(item.name == 'ted');
});
小开

可以使用普通的 javascript-Filter ()

$scope.items = $scope.items.filter(function(item) {
return item.name !== 'ted';
});
小开

回到这个问题。从数组中删除项的正确“角度方式”使用 $filter。只需在控制器中注入 $filter 并执行以下操作:

$scope.items = $filter('filter')($scope.items, {name: '!ted'})

您不需要加载任何额外的库，也不需要求助于 Javascript 原语。

小开

只是在“角度”解上稍微扩展了一下。我想排除一个基于数字 id 的项，所以！方法不管用。 对{ name: ‘ ted’}或{ id: 42}适用的更一般的解决方案是:

mycollection = $filter('filter')(myCollection, { id: theId }, function (obj, test) {
return obj !== test; });
小开

如果有任何函数与 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) ] });
});
};

列表参数名为 物品。 参数 完成指示是否该项目将被删除。希望帮助你。问候。

小开

在我的 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);
小开

我对此的解决方案(这并没有导致任何性能问题) :

  1. 通过方法 delete 扩展 array 对象(我肯定你不止一次需要它) :
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 的网站

  1. 使用 forEach 和一个基本检查:
$scope.items.forEach(function(element, index, array){
if(element.name === 'ted'){
$scope.items.remove(index);
}
});

最后 $摘要将被触发 angularjs 和我的 UI 是立即更新没有任何可识别的延迟。

小开

我的解决方案很直接

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

我喜欢@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);
}
}
小开

我的项目有唯一的 ID。我删除一个通过过滤角度 $filter服务的模型:

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"


提交答案