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

Angular scope doesn't update when removing an item

本文关键字：范围 更新 项目      更新时间：2023-11-04

我有一个简单的应用程序，我可以在其中将用户添加到列表中并删除它们。

用于添加新用户的表单绑定到$scope.newPerson 。提交表单时，我将newPerson对象添加到$scope.people这是一个包含person对象的数组。

我使用 ng-repeat 指令遍历 people 数组，以打印出当前添加到范围的人员。这些行都有一个删除按钮(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 的新手，我似乎找不到很多关于解决这个问题的信息。当我删除一个人时，如何让它更新我的阵列？谢谢。

我做了以下操作来解决这个问题：

ng-repeat块上不再有ng-model：

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

重构了removePerson()的ng-click事件：

<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数组更新。但是，在巴塔朗中，数组不会更新。

经验教训：有时，自己记录内容比依赖工具更好;)

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

相关文章：