Der Winkelbereich wird beim Entfernen eines Objekts nicht aktualisiert.

Question

Ich habe eine einfache Anwendung, mit der ich Benutzer zu einer Liste hinzufügen und sie entfernen kann. Das Formular zum Hinzufügen eines neuen Benutzers wird an $scope.newPerson gebunden. Nach dem Senden des Formulars füge ich das newPerson-Objekt zu $scope.people hinzu, das ein Array ist, das person Objekte enthält.

Ich Schleife über die people Array mit einer ng-repeat Richtlinie, um die Personen, die derzeit zum Umfang hinzugefügt werden. Diese Zeilen haben alle eine Entfernen-Taste (Jade-Schnipsel):

div.row(data-person, ng-repeat="person in people", ng-model="person") 
    button(ng-click="removePerson(person)") Remove 

Wenn ich auf die Schaltfläche Entfernen klicken, ich diese Funktion ausführen:

$scope.removePerson = function(person) { 
    var index = $scope.people.indexOf(person); 
    if (index > -1) { 
    $scope.people.splice(index, 1); 
    person = null; 
    } 
} 

Diese die Zeile aus der Tabelle entfernt, und setzt die person Umfang zu null. Batarang zeigt danach { This scope has no models }.

Allerdings habe ich festgestellt, dass mein people Array nicht aktualisiert wird. Wenn ich den Bereich in Batarang überprüfe, ist die Person, die ich gerade gelöscht habe, immer noch in diesem Array. Wenn ich anfange zu tippen, um eine neue Person hinzuzufügen, wird sie aktualisiert. Wenn ich die gesamte Seite ohne diesen Vorgang an meinen Server übergebe, enthält das Array immer noch die entfernten Personen.

Wenn ich setzen $scope.$apply() nach person = null;, bekomme ich das erwartete Verhalten, aber es wirft einen Fehler, dass ein apply is in progress. Ich lese auch $apply() anrufen selbst gilt als schlechte Praxis. (?)

Ich bin neu in Angular und ich kann nicht viele Informationen zur Lösung dieses Problems finden. Wie würde ich mein Array aktualisieren, wenn ich eine Person entferne? Vielen Dank.

Answer 1

Ich habe die folgenden dieses Problem zu beheben:

nicht mehr ng-model auf dem ng-repeat Block:

div.row(data-person, ng-repeat="person in people") 

Überarbeitete die ng-click Ereignis für removePerson():

<button ng-click="removePerson($index)"> 
    Remove 
</button> 

und änderte den removePerson() Code dazu:

$scope.removePerson = function(index) { 
    $scope.people.splice(index, 1); 
}; 

nicht sicher, ob dies tatsächlich fixiert nichts im Vergleich zu meinem vorherigen Code, weil ich, dass dies auffiel, war auch ein Batarang Problem. Wenn ich einfach {{ people }} zu meinem HTML oder console.log($scope.people) loggen, sehe ich die people Array-Aktualisierung. In Batarang wird das Array jedoch nicht aktualisiert.

Lektion gelernt: manchmal Sachen abzumelden selbst ist besser als auf Werkzeuge, die auf;)

Answer 2

Slice Methode nicht aktualisieren Sie Ihre Array, aber zurückkehren New einer