L'utilisation $index
fonctionne parfaitement dans les cas de base, et la réponse de @ charlietfl est excellente. Mais parfois, ce $index
n'est pas suffisant.
Imaginez que vous ayez un seul tableau, que vous présentez dans deux ng-répétitions différentes. L'un de ces ng-repeat est filtré pour les objets qui ont une propriété true, et l'autre est filtré pour une propriété falsy. Deux tableaux filtrés différents sont présentés, qui dérivent d'un seul tableau d'origine. (Ou, si cela aide à visualiser: peut-être que vous avez un seul tableau de personnes et que vous voulez une répétition ng pour les femmes de ce tableau et une autre pour les hommes de ce même tableau .) Votre objectif: supprimer de manière fiable du tableau d'origine, en utilisant les informations des membres des tableaux filtrés.
Dans chacun de ces tableaux filtrés, $ index ne sera pas l'index de l'élément dans le tableau d'origine. Ce sera l'index dans le sous-tableau filtré . Ainsi, vous ne pourrez pas dire l'index de la personne dans le people
tableau d' origine , vous ne connaîtrez que l'index $ du women
ou du men
sous-tableau. Essayez de supprimer en utilisant cela, et vous aurez des éléments disparaissant de partout sauf là où vous le vouliez. Que faire?
Si vous avez la chance d'utiliser un modèle de données comprenant un identifiant unique pour chaque objet, utilisez-le au lieu de $ index, pour trouver l'objet et splice
le sortir du tableau principal. (Utilisez mon exemple ci-dessous, mais avec cet identifiant unique.) Mais si vous n'êtes pas aussi chanceux?
Angular augmente en fait chaque élément dans un tableau ng-répété (dans le tableau principal d'origine) avec une propriété unique appelée $$hashKey
. Vous pouvez rechercher dans le tableau d'origine une correspondance avec l' $$hashKey
élément que vous souhaitez supprimer et vous en débarrasser de cette façon.
Notez qu'il $$hashKey
s'agit d'un détail d'implémentation, non inclus dans l'API publiée pour ng-repeat. Ils pouvaient retirer le support de cette propriété à tout moment. Mais probablement pas. :-)
$scope.deleteFilteredItem = function(hashKey, sourceArray){
angular.forEach(sourceArray, function(obj, index){
// sourceArray is a reference to the original array passed to ng-repeat,
// rather than the filtered version.
// 1. compare the target object's hashKey to the current member of the iterable:
if (obj.$$hashKey === hashKey) {
// remove the matching item from the array
sourceArray.splice(index, 1);
// and exit the loop right away
return;
};
});
}
Invoquer avec:
ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"
EDIT: L'utilisation d'une fonction comme celle-ci, qui clique sur au $$hashKey
lieu d'un nom de propriété spécifique au modèle, a également l'avantage supplémentaire significatif de rendre cette fonction réutilisable dans différents modèles et contextes. Fournissez-lui votre référence de tableau et votre référence d'élément, et cela devrait simplement fonctionner.