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

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

HTML du modèle 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 veux pas faire un appel de méthode au serveur pour les données que le client possède déjà, je veux simplement supprimer cette personne de la portée.

Des idées?

Votre problème ne concerne pas vraiment Angular, mais les méthodes Array. La méthode appropriée pour supprimer un élément particulier d'un tableau est d'utiliser Array.splice. De plus, lorsque vous utilisez ng-repeat, vous avez accès à la fonction spéciale$index propriété , qui est l'index actuel du tableau que vous avez passé.

La solution est en fait assez simple:

Vue:

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

Manette:

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

Vous devrez trouver l'index du persondans votre personstableau, puis utiliser la spliceméthode du tableau :

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

J'utiliserais la bibliothèque 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 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 Démo dans Fiddle .

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

cela fonctionne pour moi!

Si vous avez une fonction associée à la liste, lorsque vous créez la fonction d'épissure, 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) ] });
    });
};

Le paramètre de liste est nommé items . Le paramètre x.done indique si l'élément sera supprimé.

Autres références: un autre exemple

J'espère vous aider. Salutations.

Pour la réponse acceptée de @Joseph Silber ne fonctionne pas, car indexOf renvoie -1. Ceci est probablement dû au fait qu'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 cela avec la fonction angular.toJson (), mais cela n'a pas fonctionné :(

Ah, j'ai découvert la raison ... J'utilise une méthode chunk pour créer deux colonnes dans ma table en regardant mon $ scope.items. Désolé!

Vous pouvez également utiliser ceci

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

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

arrayRemove($scope.persons, person)

array.splice(array.pop(item));

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