L'ambito angolare non si aggiorna quando si rimuove un articolo

Question

Ho una semplice applicazione in cui posso aggiungere utenti a un elenco e rimuoverli.

Il modulo per aggiungere un nuovo utente si lega a $scope.newPerson. All'invio del modulo, aggiungo l'oggetto newPerson a $scope.people che è un array contenente oggetti person.

I looping sull'array people con una direttiva ng-repeat, per stampare le persone attualmente aggiunte all'ambito. Queste righe sono tutte dotate di pulsante Rimuovi (Jade frammento):

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

quando clicco sul pulsante Rimuovi, eseguo questa funzione:

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

Ciò elimina la riga dalla tabella, e imposta il person portata a null. Batarang mostra { This scope has no models } in seguito.

Tuttavia, ho notato che il mio array people non si aggiorna. Quando controllo lo scope in Batarang, la persona che ho appena eliminato è ancora in quella matrice. Quando inizio a digitare per aggiungere una nuova persona, si aggiorna. Se invio l'intera pagina al mio server senza farlo, l'array contiene ancora le persone rimosse.

Se inserisco $scope.$apply() dopo person = null;, ottengo il comportamento previsto, tuttavia genera un errore che è apply is in progress. Leggo anche chiamando lo $apply() da solo, è considerato una cattiva pratica. (?)

Sono nuovo di Angular e non riesco a trovare molte informazioni sulla risoluzione di questo problema. Come posso aggiornare i miei array quando rimuovo una persona? Grazie.

Answer 1

ho fatto quanto segue per risolvere il problema:

Non più ng-model sul ng-repeat blocco:

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

rifattorizzazione di ng-click evento per removePerson():

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

e cambiato il codice removePerson() a questo:

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

Non so se questo qualcosa di realmente fisso rispetto al mio precedente codice, perché ho notato che questo è stato anche un problema di Batarang. Quando registro semplicemente {{ people }} nel mio codice HTML o console.log($scope.people), vedo l'aggiornamento dell'array people. Tuttavia, in Batarang, l'array non si aggiorna.

Lezione imparata: a volte, la registrazione roba da soli è meglio che fare affidamento su strumenti;)

Answer 2

metodo slice non aggiornare la matrice, ma restituire nuova