Comment supprimer un article de scope dans AngularJS?

liste de choses à faire Simple, mais avec un bouton Supprimer sur la page de liste pour chaque article:

enter image description here

modèle pertinent HTML:

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

bien que la base de données supprimé avec succès, Je ne peux pas tirer cet article de la portée et je ne veux pas pour faire un appel de méthode au serveur pour les données que le client a déjà, je veux juste supprimer cette personne de scope.

des idées?

153
demandé sur Xufox 2013-01-10 08:04:10

10 réponses

votre problème n'est pas vraiment avec Angular, mais avec des méthodes de tableau. La bonne façon de supprimer un élément particulier d'un tableau est avec Array.splice . En outre, lorsque vous utilisez ng-repeat, vous avez accès à la propriété spéciale $index , qui est l'index courant du tableau dans lequel vous êtes passé.

la solution est en fait assez simple:

:

<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
répondu Josh David Miller 2013-01-10 05:09:36

vous devrez trouver l'index du person dans votre tableau persons , puis utiliser le tableau splice méthode:

$scope.persons.splice( $scope.persons.indexOf(person), 1 );
309
répondu Joseph Silber 2013-01-10 04:08:33

j'utiliserais le soulignement .js bibliothèque qui a une liste de fonctions utiles.

without

without_.without(array, *values)

retourne 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 en 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 .

8
répondu Maxim Shoustin 2018-04-26 20:16:40
$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

ça marche pour moi!

6
répondu cebor 2013-09-11 18:07:47

si vous avez une fonction associée à list ,lorsque vous faites la fonction splice, l'association est supprimée aussi. 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 appelée items . Le param X. fait indiquer si l'élément sera supprimé.

autre référence: autre exemple

l'Espoir de vous aider. Salutation.

4
répondu Drako 2017-05-23 10:31:39

pour la réponse acceptée de @Joseph Silber ne fonctionne pas, car indexOf retourne -1. C'est probablement parce Qu'Angular ajoute un hashkey, ce qui est différent pour mon $scope.les éléments[0] et mon article. J'ai essayé de résoudre ce avec l'angle.fonction toJson (), mais cela n'a pas fonctionné :(

Ah, j'ai trouvé la raison... J'utilise une méthode de morceau pour créer deux colonnes dans ma table en regardant mon $scope.article. Désolé!

2
répondu gabn88 2015-04-14 18:29:08

vous pouvez également utiliser ce

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
2
répondu Chetann 2016-01-04 09:12:19

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

arrayRemove($scope.persons, person)
1
répondu Allen 2015-08-04 13:02:30
array.splice(array.pop(item));
1
répondu Taran 2016-05-20 22:44:55

pour supprimer un élément du champ d'application utilisation:

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

de entrez la description du lien ici

0
répondu Cubiczx 2018-03-02 07:43:49