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:
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?
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);
});
};
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 );
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 .
$scope.removeItem = function() {
$scope.items.splice($scope.toRemove, 1);
$scope.toRemove = null;
};
ça marche pour moi!
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.
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é!
vous pouvez également utiliser ce
$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
Angulaire ont une fonction intégrée appelée arrayRemove
, dans votre cas, la méthode peut être simplement:
arrayRemove($scope.persons, person)
pour supprimer un élément du champ d'application utilisation:
// remove an item
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};