删除项目时,角度范围不会更新

Question

我有一个简单的应用程序,我可以将用户添加到列表并删除它们.

添加新用户的表单绑定到$scope.newPerson.上提交表单,我添加newPerson对象$scope.people是含有一个阵列person对象.

我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.Batarang { 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")

重构了该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 中，数组不会更新。

经验教训：有时，自己记录数据比依赖工具更好；）