Comment supprimer un objet ou un élément d’un tableau à l’aide de ng-clic ?

Question

Je suis en train d’écrire une fonction qui me permet de supprimer un élément lorsque l’utilisateur clique sur le bouton, mais je pense que je suis se confondre avec la fonction - utiliser `` ?

HTML & app.js :

Answer 1

Pour supprimer un élément, vous devez le retirer de tableau et peuvent passer bday article à votre fonction de suppression dans le balisage. Puis dans le contrôleur de rechercher l'index de l'élément et enlevez de la matrice

<a class="btn" ng-click="remove(item)">Delete</a>

Puis dans le contrôleur:

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item)
  $scope.bdays.splice(index, 1);     
}

Angulaire va automatiquement détecter le changement de l' bdays tableau et faire la mise à jour de ng-repeat

DÉMO: http://plnkr.co/edit/ZdShIA?p=preview

EDIT: Si faire des mises à jour en direct avec le serveur serait d'utiliser un service que vous créez à l'aide d' $resource pour gérer le tableau des mises à jour au même moment de la mise à jour du serveur

Answer 2

Il s’agit d’une réponse correcte :

Réponse de @charlietfl. Je pense que c’est une erreur car vous passez `` comme paramètre, mais vous utilisez plutôt le souhait au contrôleur. Corrigez-moi si je me trompe  :)

Answer 3

À l'aide de $index fonctionne parfaitement bien dans la base de cas, et @charlietfl la réponse est grande. Mais parfois, $index n'est pas suffisant.

Imaginez que vous avez un tableau unique, que vous avez présenté en deux ng-repeat. L'un de ces ng-repeat est filtré pour des objets qui ont une truthy de la propriété, et l'autre est filtré par un falsy de la propriété. Deux filtré des tableaux sont présentés, qui tirent à partir d'un seul tableau d'origine. (Ou, si cela permet de visualiser: peut-être vous avez un groupe de personnes, et que vous voulez une ng-repeat pour les femmes dans ce tableau, et un autre pour les hommes dans le même tableau.) Votre objectif: supprimer de manière fiable à partir du tableau d'origine, à l'aide des informations de la part des membres de l'filtré tableaux.

Dans chacun de ces filtré tableaux, $index ne sera pas l'index de l'élément dans le tableau d'origine. Il va être dans l'index filtré sous-tableau. Donc, vous ne serez pas en mesure de dire à la personne de l'indice à l'origine, people tableau, vous ne le saurez que le $index de l' women ou men sous-tableau. Essayez de supprimer les utiliser, et vous aurez des objets qui disparaissent de partout, sauf à l'endroit voulu. Que faire?

Si vous êtes assez chanceux d'être à l'aide d'un modèle de données comprend un identificateur unique pour chaque objet, puis l'utiliser à la place de $index, pour trouver l'objet et de l' splice hors du tableau principal. (Utiliser mon exemple ci-dessous, mais avec cet identifiant unique.) Mais si vous n'êtes pas aussi chanceux?

Angulaire en fait augmente les capacités de chaque élément dans une ng-répété array (dans la main, le tableau d'origine) avec une propriété unique appelé $$hashKey. Vous pouvez rechercher le tableau original pour un match sur l' $$hashKey de l'élément que vous souhaitez supprimer, et de se débarrasser d'elle de cette façon.

Notez que $$hashKey est un détail d'implémentation, qui ne figure pas dans la publication de l'API pour les ng-repeat. Ils pourraient supprimer la prise en charge 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'Aide d'une fonction comme celle-ci, les touches sur l' $$hashKey au lieu d'un modèle spécifique de la propriété nom, est également l'important avantage de rendre cette fonction réutilisable dans différents modèles et contextes. Fournir avec votre référence de tableau, et votre point de référence, et il devrait fonctionner.