如何从angular.js数组中删除元素/节点
如何从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();
}
}
如果视图中存在名为ted的元素,我想要移除第一个元素,对吧?这个代码可以正常工作,但是视图会重新加载所有元素,因为数组的所有键都发生了位移。这在我正在创建的移动应用中产生了不必要的延迟...
有没有人对这个问题有解决办法?
使用纯JavaScript中的Array.prototype.filter()方法可以从angular.js数组中删除元素/节点。
解决方法如下:
$scope.items = $scope.items.filter(function(item) { return item.name !== 'ted'; });
原因:如果想要从angular.js数组中删除元素或节点,可以使用纯JavaScript中的filter()方法。该方法会创建一个新的数组,其中包含满足指定条件的所有元素。在这个例子中,我们使用filter()方法来创建一个新的数组,其中不包含名称为'ted'的元素。
这是一种有效的方法来删除angular.js数组中的元素或节点。
在Angular.js中,从数组中删除元素/节点并没有什么复杂的操作。要从任何数组中删除元素,你需要使用splice方法:$scope.items.splice(index, 1)。下面是一个示例:
HTML:
-
{{item}}
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);
}
}
在上述代码中,$scope.items.splice(index, 1)的意思是从数组中删除一个元素,该元素的位置是index。
在删除元素时要注意,$index并不一定与$scope.items的索引一致,特别是当使用orderBy或filter时。一般不建议使用$index,因为它在不同情况下的表现可能不一致。
有人问到有什么替代方案,我记得我使用了bpaul的解决方案,具体可以参考stackoverflow的回答:stackoverflow.com/a/22160628/1529346
问题的原因是用户想要从Angular.js数组中删除元素/节点,但不清楚如何实现。解决方法是使用$filter来过滤数组并删除指定元素。以下是解决方法的详细内容:
对于任何回答这个问题的人,请使用“Angular Way”来从数组中删除项目,可以通过将$filter注入到控制器中,并执行以下操作:
$scope.items = $filter('filter')($scope.items, {name: '!ted'})
不需要加载任何其他库或使用JavaScript原始类型。
如果你有一个名为“ted”和“teddy”的元素,并且只想要删除“ted”元素,可以在末尾使用true:
$filter('filter')($scope.items, {name: '!ted'}, true)
具体参考[docs.angularjs.org/api/ng/filter/filter](https://docs.angularjs.org/api/ng/filter/filter)
如果你想要删除包含特定数字id的元素,可以使用$filter来查找元素,但我还没有找到否定它的方法,因为{ id: "!42" }是一个字符串而不是数字。但是以下方法可以实现:
$filter('filter')($scope.items, function(value, index) {return value.id !== 42;});
尽管这个答案的“Angular-ness”更高,但与splice方法相比,可读性和可用性都要低得多。