web-dev-qa-db-de.com

Wie entferne ich ein Objekt in AngularJS aus dem Gültigkeitsbereich?

Einfache Aufgabenliste, aber mit einer Löschschaltfläche auf der Listenseite für jedes Element:

enter image description here

Relevantes Template-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>

Relevante Controller-Methode:

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

Ich habe $scope.persons.pull(person) und $scope.persons.remove(person) ausprobiert.

Obwohl die Datenbank erfolgreich gelöscht wurde, kann ich dieses Element nicht aus dem Bereich entfernen und möchte keinen Methodenaufruf an den Server für Daten senden, über die der Client bereits verfügt. Ich möchte nur diese eine Person aus dem Bereich entfernen.

Irgendwelche Ideen?

javascripthtmlangularjs
153
Bye

Ihr Problem liegt nicht wirklich bei Angular, sondern bei Array-Methoden. Der richtige Weg, ein bestimmtes Element aus einem Array zu entfernen, ist mit Array.splice . Wenn Sie ng-repeat verwenden, haben Sie außerdem Zugriff auf das spezielle $index -Eigenschaft. Dies ist der aktuelle Index des Arrays, das Sie übergeben haben.

Die Lösung ist eigentlich ziemlich einfach:

Ansicht: 

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

Controller: 

$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

Sie müssen den Index des person in Ihrem persons-Array suchen und dann die splice -Methode des Arrays verwenden:

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

Ich würde die Bibliothek nderscore.js verwenden, die eine Liste nützlicher Funktionen enthält.

without

without_.without(array, *values)

Gibt eine Kopie des Arrays zurück, wobei alle Instanzen der Werte entfernt wurden.

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

Beispiel

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

Siehe Demo in JSFiddle .

filter

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

// => [2, 4, 6]

Beispiel

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

Siehe Demo in Fiddle .

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

das funktioniert bei mir!

7
cebor

Wenn Sie der Liste eine Funktion zugeordnet haben, wird die Zuordnung beim Ausführen der Spleißfunktion ebenfalls gelöscht. Meine Lösung:

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

Der Listenparameter heißt artikel. Der param x.done Geben Sie an, ob der Artikel gelöscht werden soll.

Weitere Referenzen: Anderes Beispiel

Hoffe dir zu helfen. Schöne Grüße.

4
Drako

Sie können dies auch verwenden

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

Für die akzeptierte Antwort von @Joseph funktioniert Silber nicht, da indexOf -1 zurückgibt. Dies liegt wahrscheinlich daran, dass Angular einen Hashkey hinzufügt, der für mein $ scope.items [0] und mein Item unterschiedlich ist. Ich habe versucht, dies mit der Funktion angular.toJson () zu beheben, aber es funktioniert nicht :(

Ah, ich habe den Grund herausgefunden ... Ich benutze eine Chunk-Methode, um zwei Spalten in meiner Tabelle zu erstellen, indem ich meine $ scope.items beobachte. Es tut uns leid!

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

Angular hat eine eingebaute Funktion namens arrayRemove, in Ihrem Fall kann die Methode einfach sein:

arrayRemove($scope.persons, person)
1
Allen

So entfernen Sie ein Element aus dem Bereich:

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

Von Linkbeschreibung hier eingeben

0
Cubiczx