Comment supprimer un élément d'un tableau dans la portée d'AngularJS ?

Question

Liste de tâches simple, mais avec un bouton de suppression sur la page de la liste pour chaque élément :

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ôle 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) y $scope.persons.remove(person) .

Bien que la base de données ait été supprimée avec succès, je ne peux pas retirer cet élément de la portée et je ne veux pas faire un appel de méthode au serveur pour des données que le client a déjà, je veux juste retirer cette personne de la portée.

Des idées ?

Answer 1

Vous devrez trouver l'index de l'objet de l'enquête. person dans votre persons puis utilisez la fonction splice méthode :

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

Answer 2

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 la méthode Array.splice . De plus, lorsque vous utilisez ng-repeat, vous avez accès à la fonction spéciale $index qui est l'index actuel du tableau que vous avez transmis.

La solution est en fait assez simple :

Voir :

<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);
  });
};

Answer 3

J'utiliserais le Underscore.js qui contient une liste de fonctions utiles.

without

without_.without(array, *values)

Renvoie une copie du tableau avec toutes les instances 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 la démo 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 .

Answer 4

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

cela fonctionne pour moi !

Answer 5

Si vous avez une fonction associée à la liste, lorsque vous faites la fonction de jonction, l'association est également supprimée. 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 des paramètres est nommée articles . Le paramètre x.done indiquer si l'élément sera supprimé.

Une autre référence : Un autre exemple

J'espère vous aider. Salutations.