web-dev-qa-db-fra.com

Comment supprimer un élément de scope dans AngularJS?

Liste simple à faire, mais avec un bouton de suppression sur la page de liste pour chaque élément:

enter image description here

Modèle HTML pertinent:

<tr ng-repeat="person in persons">
  <td>{{person.name}} - # {{person.id}}</td>
  <td>{{person.description}}</td>
  <td nowrap=nowrap>
    <a href="#!/edit"><i class="icon-edit"></i></a>
    <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
  </td>
</tr>

Méthode de contrôleur pertinente:

$scope.delete = function (person) {
  API.DeletePerson({ id: person.id }, function (success) {
    // I need some code here to pull the person from my scope.
  });
};

J'ai essayé $scope.persons.pull(person) et $scope.persons.remove(person).

Bien que la base de données ait été supprimée avec succès, je ne peux pas extraire cet élément de la portée et je ne souhaite pas appeler de méthode sur le serveur pour les données que possède déjà le client. Je souhaite simplement supprimer cette personne de la portée.

Des idées?

javascripthtmlangularjs
153
Bye

Votre problème ne concerne pas vraiment Angular, mais les méthodes Array. La bonne façon de supprimer un élément particulier d'un tableau est d'utiliser Array.splice . De même, lorsque vous utilisez ng-repeat, vous avez accès à la propriété spéciale _$index_, qui correspond à l'index actuel du tableau que vous avez transmis.

La solution est en fait assez simple:

Vue: 

_<a ng-click="delete($index)">Delete</a>
_

Contrôleur: 

_$scope.delete = function ( idx ) {
  var person_to_delete = $scope.persons[idx];

  API.DeletePerson({ id: person_to_delete.id }, function (success) {
    $scope.persons.splice(idx, 1);
  });
};
_
257
Josh David Miller

Vous devrez trouver l'index de person dans votre tableau persons, puis utiliser la méthode du tableau splice :

$scope.persons.splice( $scope.persons.indexOf(person), 1 );
309
Joseph Silber

Je voudrais utiliser la bibliothèque nderscore.js qui contient une liste de fonctions utiles.

without

without_.without(array, *values)

Retourne une copie du tableau avec toutes les occurrences des valeurs supprimées.

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
// => [2, 3, 4]

Exemple

var res = "deleteMe";

$scope.nodes = [
  {
    name: "Node-1-1"
  },
  {
    name: "Node-1-2"
  },
  {
    name: "deleteMe"
  }
];

$scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, {
  name: res
}));

Voir Demo dans JSFiddle .

filter

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

// => [2, 4, 6]

Exemple

$scope.newNodes = _.filter($scope.nodes, function(node) {
  return !(node.name == res);
});

Voir la démo dans violon .

8
Maxim Shoustin
$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

cela fonctionne pour moi!

7
cebor

Si une fonction est associée à la liste, l'association est également supprimée lorsque vous créez la fonction de raccordement. Ma solution:

$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 liste param est nommée articles. Le param x.done indiquer si l'élément sera supprimé.

Autres références: n autre exemple

J'espère vous aider. Salutations.

4
Drako

Vous pouvez aussi utiliser ceci

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
2
Chetann

Car la réponse acceptée de @Joseph Silber ne fonctionne pas, car indexOf renvoie -1. C'est probablement parce que Angular ajoute une clé de hachage, ce qui est différent pour mon $ scope.items [0] et mon élément. J'ai essayé de résoudre ce problème avec la fonction angular.toJson (), mais cela n'a pas fonctionné :(

Ah, j'ai découvert la raison ... J'utilise une méthode de type chunk pour créer deux colonnes dans ma table en surveillant mes $ scope.items. Pardon!

2
gabn88
array.splice(array.pop(item));
1
Taran

Angular possède une fonction intégrée appelée arrayRemove, dans votre cas, la méthode peut être simplement:

arrayRemove($scope.persons, person)
1
Allen

Pour supprimer un élément de la portée, utilisez:

// remove an item
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    };

De entrez la description du lien ici

0
Cubiczx