Comment supprimer un élément ou un object d’un tableau en utilisant ng-click?

J’essaie d’écrire une fonction qui me permet de supprimer un élément lorsque le bouton est cliqué, mais je pense que je suis confondu avec la fonction – est-ce que j’utilise $digest ?

HTML & app.js:

 
  • {{bday.name}} | {{bday.date}}

    Delete
$scope.remove = function(){ $scope.newBirthday = $scope.$digest(); };

Pour supprimer un élément, vous devez le supprimer du tableau et transmettre l’élément bday à votre fonction de suppression dans le balisage. Ensuite, dans le contrôleur, recherchez l’index de l’élément et retirez-le du tableau.

 Delete 

Puis dans le contrôleur:

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

Angular détectera automatiquement la modification du tableau bdays et effectuera la mise à jour de ng-repeat

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

EDIT: si les mises à jour en direct avec le serveur utilisent un service que vous créez en utilisant $resource pour gérer les mises à jour de la baie en même temps que la mise à jour du serveur

Ceci est une réponse correcte:

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

Dans la réponse de @ charlietfl. Je pense que c’est faux puisque vous passez $index tant que paramètre mais que vous utilisez plutôt le souhait dans le contrôleur. Corrige moi si je me trompe 🙂

au cas où vous êtes dans un ng-repeat

vous pouvez utiliser une option de ligne unique

  

$index est utilisé par angular pour afficher l’index actuel du tableau dans un ng-repeat

Utiliser $index fonctionne parfaitement dans les cas basiques, et la réponse de @ charlietfl est excellente. Mais parfois, $index ne suffit pas.

Imaginez que vous ayez un seul tableau, que vous présentez dans deux ng-repeat différents. L’une de ces ng-repeat est filtrée pour les objects qui ont une propriété true, et l’autre est filtrée pour une propriété falsy. Deux tableaux filtrés différents sont présentés, qui dérivent d’un seul tableau original. (Ou, si cela aide à visualiser: peut-être avez-vous un seul groupe de personnes, et vous voulez un ng-repeat pour les femmes dans ce tableau, et un autre pour les hommes dans ce même tableau .) Votre objective: supprimer de manière fiable 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 indiquer l’index de la people dans le tableau des people origine, vous ne connaîtrez que l’index $ du sous-tableau women ou men . Essayez de supprimer en utilisant cela, et vous aurez des éléments disparaissant partout sauf là où vous le souhaitez. Que faire?

Si vous avez la chance d’utiliser un modèle de données incluant un identifiant unique pour chaque object, utilisez-le plutôt que $ index pour trouver l’object et le splice 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 d’un tableau répété en ng (dans le tableau principal d’origine) avec une propriété unique appelée $$hashKey . Vous pouvez rechercher dans le tableau d’origine une correspondance sur le $$hashKey de l’élément que vous souhaitez supprimer, et vous en débarrasser de cette manière.

Notez que $$hashKey est un détail d’implémentation, non inclus dans l’API publiée pour ng-repeat. Ils peuvent supprimer 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 $$hashKey place d’un nom de propriété spécifique au modèle, présente également l’avantage considérable de rendre cette fonction réutilisable sur différents modèles et contextes. Fournissez-le avec votre référence de tableau et votre référence d’élément, et cela devrait juste fonctionner.

Sur la base de la réponse acceptée, cela fonctionnera avec ngRepeat , filter et gérera mieux les expulsions:

Manette:

 vm.remove = function(item, array) { var index = array.indexOf(item); if(index>=0) array.splice(index, 1); } 

Vue:

 ng-click="vm.remove(item,$scope.bdays)" 

J’écris habituellement dans un tel style:

 Delete $scope.remove = function(index){ $scope.[yourArray].splice(index, 1) }; 

J’espère que cela vous aidera Vous devez utiliser un point (.) Entre $ scope et [yourArray]

Je ne suis pas d’accord que vous devriez appeler une méthode sur votre contrôleur. Vous devez utiliser un service pour toute fonctionnalité réelle et définir des directives pour toute fonctionnalité d’évolutivité et de modularité, ainsi que pour atsortingbuer un événement click contenant un appel au service que vous injectez dans votre directive.

Donc, par exemple, sur votre code HTML …

 Delete 

Ensuite, créez une directive …

 angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){ return function(scope, element, attrs){ angular.element(element.bind('click', function(){ myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope); }; }; }]) 

Alors à votre service …

 angular.module('myApp').factory('myService', [function(){ return { removeBirthday: function(birthdayIndex, scope){ scope.bdays.splice(birthdayIndex); scope.$apply(); } }; }]); 

Lorsque vous écrivez correctement votre code, vous simplifiez l’écriture des modifications futures sans avoir à restructurer votre code. Il est organisé correctement et vous gérez correctement les événements de clics personnalisés en liant à l’aide de directives personnalisées.

Par exemple, si votre client dit: “Hé, maintenant faisons-le appeler le serveur et faire du pain, puis ouvrez un modal”. Vous pourrez facilement accéder au service lui-même sans avoir à append ou à modifier le code HTML et / ou le code de la méthode du contrôleur. Si vous ne disposiez que d’une seule ligne sur le contrôleur, vous devrez éventuellement utiliser un service pour étendre la fonctionnalité au levage le plus lourd demandé par le client.

De plus, si vous avez besoin d’un autre bouton “Supprimer” ailleurs, vous avez maintenant un atsortingbut directive (“ng-remove-birthday”) que vous pouvez facilement atsortingbuer à n’importe quel élément de la page. Cela le rend maintenant modulaire et réutilisable. Cela vous sera utile lorsque vous parlerez du paradigme des composants Web HEAVY d’Angular 2.0. Il n’y a pas de contrôleur dans 2.0. 🙂

Heureux en développement !!!

mise en œuvre sans contrôleur.

      
  • {{x}} ×

Click the little x to remove an item from the shopping list.

Voici une autre réponse. J’espère que cela aidera.

 Delete $scope.delete(item){ var index = this.list.indexOf(item); this.list.splice(index, 1); } array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, item1, item2, ...) 

La source complète est ici
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Si vous avez un identifiant ou un champ spécifique dans votre élément, vous pouvez utiliser filter (). son acte comme où ().

 Delete 

en contrôleur:

 $scope.remove = function(item) { $scope.bdays = $scope.bdays.filter(function (element) { return element.ID!=item.ID }); }