Wie entferne ich ein Element aus einem Array im AngularJS-Bereich?

Einfache Aufgabenliste, jedoch mit einer Schaltfläche zum Löschen auf der Listenseite für jedes Element:

Relevante Vorlage 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 es versucht $scope.persons.pull(person)und $scope.persons.remove(person).

Obwohl die Datenbank erfolgreich gelöscht wurde, kann ich dieses Element nicht aus dem Bereich ziehen 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?

Ihr Problem liegt nicht wirklich bei Angular, sondern bei Array-Methoden. Der richtige Weg, um ein bestimmtes Element aus einem Array zu entfernen, ist mit Array.splice. Wenn Sie ng-repeat verwenden, haben Sie außerdem Zugriff auf die spezielle $indexEigenschaft, bei der es sich um den aktuellen Index des Arrays handelt, das Sie übergeben haben.

Die Lösung ist eigentlich ziemlich einfach:

Aussicht:

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

Regler:

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

Sie müssen den Index von personin Ihrem personsArray finden und dann die spliceMethode des Arrays verwenden:

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

Ich würde die Bibliothek Underscore.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 .

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

das funktioniert bei mir!

Wenn der Liste eine Funktion zugeordnet ist, wird beim Ausführen der Spleißfunktion auch die Zuordnung 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 Elemente . Der Parameter x.done gibt an, ob das Element gelöscht wird.

Weitere Referenzen: Ein weiteres Beispiel

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

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

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

Sie können dies auch verwenden

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

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

arrayRemove($scope.persons, person)

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

So entfernen Sie ein Element aus dem Gültigkeitsbereich:

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

Von treten Sie hier ein Link Beschreibung