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的{{1}}事件：

removePerson()

并将<button ng-click="removePerson($index)"> Remove </button>代码更改为：

removePerson()

与我之前的代码相比，不确定这是否真正修复了任何内容，因为我注意到这也是一个Batarang问题。当我只是将$scope.removePerson = function(index) { $scope.people.splice(index, 1); };记录到我的HTML或{{ people }}时，我会看到console.log($scope.people)数组更新。但是，在Batarang中，阵列不会更新。

经验教训：有时候，自己记录东西比依靠工具更好;）

Answer 2

切片方法不更新数组，但返回新数组

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

2 个答案: