Угловая область не обновляется при удалении элемента

Question

У меня есть простое приложение, в котором я могу добавить пользователей в список и удалить их.

Форма для добавления нового пользователя связывается с $scope.newPerson. При отправке формы я добавляю объект newPerson к $scope.people, который представляет собой массив, содержащий person объектов.

I цикл над массивом people с директивой ng-repeat, чтобы распечатать людей, которые в настоящее время добавлены в область действия. Эти строки все есть кнопка удалить (Jade фрагмент):

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

При нажатии на кнопку Удалить, я выполнить эту функцию:

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

Это удаляет строку из таблицы, и устанавливает person до null. Затем Батаранг показывает { This scope has no models }.

Однако, я заметил, что мой массив people не обновляется. Когда я проверяю его область в Batarang, человек, которого я только что удалил, все еще находится в этом массиве. Когда я набираю текст, чтобы добавить нового человека, он обновляется. Если я отправлю всю страницу на свой сервер, не делая этого, массив все еще содержит удаленных людей.

Если я положил $scope.$apply() после person = null;, я получаю ожидаемое поведение, однако оно выдает сообщение об ошибке apply is in progress. Я также читал, что вызов $apply() сам считается плохой практикой. (?)

Я новичок в Angular, и я не могу найти много информации о решении этой проблемы. Как мне заставить его обновлять массив, когда я удаляю человека? Благодарю.

Answer 1

я сделал следующее, чтобы исправить это:

Больше не ng-model на ng-repeat блоке:

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

Refactored в ng-click событие для removePerson():

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

и изменил removePerson() код следующим образом:

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

Не уверен, если это на самом деле фиксированное ничего по сравнению с моим предыдущим кодом, потому что я заметил, что это был также вопрос Batarang. Когда я просто записываю {{ people }} в свой HTML или console.log($scope.people), я вижу обновление массива people. Однако в Batarang массив не обновляется.

урок: иногда, протоколирование вещи из себя лучше, чем полагаться на инструменты;)

Answer 2

метод ломтика не обновлять массив, но вернуться Новый один