angularjs - for - ng-repeat order by
Cómo eliminar elementos/nodos de la matriz angular.js (12)
Aquí está el filter con la biblioteca Underscore podría ayudarlo, eliminamos el elemento con el nombre "ted"
$scope.items = _.filter($scope.items, function(item) {
return !(item.name == ''ted'');
});
Estoy tratando de eliminar elementos de la matriz $scope.items para que los elementos se eliminen en la vista ng-repeat="item in items"
Solo para fines demostrativos, aquí hay un código:
for(i=0;i<$scope.items.length;i++){
if($scope.items[i].name == ''ted''){
$scope.items.shift();
}
}
Quiero eliminar el primer elemento de la vista si el nombre es correcto? Funciona bien, pero la vista vuelve a cargar todos los elementos. Porque todas las teclas de matriz han cambiado. Esto está creando un retraso innecesario en la aplicación móvil que estoy creando.
¿Alguien tiene una solución a este problema?
Me gustó la solución provista por @madhead
Sin embargo, el problema que tuve es que no funcionaría para una lista ordenada, así que, en lugar de pasar el índice a la función de eliminación, pasé el elemento y obtuve el índice a través de un índice de
p.ej:
var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);
Una versión actualizada del ejemplo de madheads está a continuación: enlace al ejemplo
HTML
<!DOCTYPE html>
<html data-ng-app="demo">
<head>
<script data-require="[email protected]" 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);
}
}
Mi solución a esto (que no ha causado ningún problema de rendimiento):
- Extienda el objeto array con un método remove (estoy seguro de que lo necesitará más de una vez):
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); };
Lo estoy usando en todos mis proyectos y mis créditos van al sitio de John Resig John Resig
- Usando forEach y un control básico:
$scope.items.forEach(function(element, index, array){ if(element.name === ''ted''){ $scope.items.remove(index); } });
Al final, el $ digest se disparará en angularjs y mi UI se actualizará inmediatamente sin ningún retraso reconocible.
Mi solución fue bastante directa
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);
}
});
Mis artículos tienen identificaciones únicas. Estoy borrando uno al filtrar el modelo con el servicio $filter angular $filter :
var myModel = [{id:12345, ...},{},{},...,{}];
...
// working within the item
function doSthWithItem(item){
...
myModel = $filter(''filter'')(myModel, function(value, index)
{return value.id !== item.id;}
);
}
Como id, también podría usar la propiedad $$ hashKey de los elementos de su modelo: $$hashKey:"object:91"
No hay ciencia espacial para eliminar elementos de la matriz. Para eliminar elementos de cualquier matriz, necesita usar splice : $scope.items.splice(index, 1); . Aquí hay un ejemplo :
HTML
<!DOCTYPE html>
<html data-ng-app="demo">
<head>
<script data-require="[email protected]" 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);
}
}
Para cualquiera que vuelva a esta pregunta. La "Forma Angular" correcta para eliminar elementos de una matriz es con $ filter. Simplemente inyecte $ filter en su controlador y haga lo siguiente:
$scope.items = $filter(''filter'')($scope.items, {name: ''!ted''})
No necesita cargar ninguna biblioteca adicional ni recurrir a primitivas Javascript.
Porque cuando haces shift() en una matriz, cambia la longitud de la matriz. Entonces, el bucle for se arruinará. Puede pasar de un extremo a otro para evitar este problema.
Por cierto, supongo que tratas de eliminar el elemento en la posición i en lugar del primer elemento de la matriz. ( $scope.items.shift(); en su código eliminará el primer elemento de la matriz)
for(var i = $scope.items.length - 1; i >= 0; i--){
if($scope.items[i].name == ''ted''){
$scope.items.splice(i,1);
}
}
Puede usar javascript simple - Array.prototype.filter()
$scope.items = $scope.items.filter(function(item) {
return item.name !== ''ted'';
});
Si tiene alguna función asociada a la lista, cuando realiza la función de empalme, la asociación también se elimina. Mi solución:
$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) ] });
});
};
La lista param se llama elementos . El parámetro x.done indica si el artículo será eliminado. Espero ayudarte Saludos.
Solo una ligera expansión en la solución ''angular''. Quería excluir un artículo basado en su identificación numérica, ¡así que! enfoque no funciona. La solución más general que debería funcionar para {name: ''ted''} o {id: 42} es:
mycollection = $filter(''filter'')(myCollection, { id: theId }, function (obj, test) {
return obj !== test; });
Usar la función indexOf no fue cortarlo en mi colección de recursos REST.
Tuve que crear una función que recupera el índice de matriz de un recurso que se encuentra en una colección de recursos:
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);