Angular $watchCollection 旧值未针对多次更新正确更新

Question

我有一个 html 文件，其中有 3 个复选框值

<input type="checkbox"ng-model="checkbox-1"/>
<input type="checkbox"ng-model="checkbox-2"/>
<input type="checkbox"ng-model="checkbox-3"/>

并且在控制器中定义了一个 watchCollection，当复选框状态更改时会触发它

$scope.$watchGroup(['checkbox-1', 'checkbox-2', 'checkbox-3'], function (newValue, oldValue) {
    console.log('checkbox-1: new - ' + newValue[0] + ' old - ' + oldValue[0]);
    console.log('checkbox-1: new - ' + newValue[1] + ' old - ' + oldValue[1]);
    console.log('checkbox-1: new - ' + newValue[2] + ' old - ' + oldValue[2]);
  });

但是当 checkboc 值一次又一次地更新时，$watchCollection 的旧值列表没有正确更新，它一直填充着旧值。

例如

所有复选框最初都未勾选
勾选第一个复选框 -> oldValue = [false, false, false], newValue = [true, false, false]
现在勾选第二个复选框 -> oldvalue = [false, false, false], newValue = [true, true, false]

在旧值列表中，第一个值应该为 true，因为我们在第一个操作中将它更改为 true。不过还是初一

我知道我可以通过使用模型值更新复选框变量并添加模型监视来解决此问题。如果有人有任何想法可以使用 $watchCollection 方法解决此问题，那就太好了？

JSFiddle - https://jsfiddle.net/a0h5nujo/

Answer 1

试试这个：

<div ng-app="valueList" ng-controller="myCtrl">
<input type="checkbox" ng-model="checkBoxes.checkbox1"/>
<input type="checkbox" ng-model="checkBoxes.checkbox2"/>
<input type="checkbox" ng-model="checkBoxes.checkbox3"/>
</div>

JS:

var app = angular.module("valueList", []);
app.controller("myCtrl", function ($scope) {
    $scope.checkBoxes = {};

    $scope.$watchGroup(['checkBoxes.checkbox1', 'checkBoxes.checkbox2', 'checkBoxes.checkbox3'], function (newValue, oldValue) {
    console.log('=======================');
    console.log('checkbox-1: old - ' + oldValue[0] + ' ,new - ' + newValue[0]);
    console.log('checkbox-1: old - ' + oldValue[1] + ' ,new - ' + newValue[1]);
    console.log('checkbox-1: old - ' + oldValue[2] + ' ,new - ' + newValue[2]);
  });
});

Answer 2

尝试添加这个：

$scope.$watchGroup(['checkbox-1', 'checkbox-2', 'checkbox-3'], function (newValue, oldValue) {
    console.log('checkbox-1: new - ' + newValue[0] + ' old - ' + oldValue[0]);
    console.log('checkbox-1: new - ' + newValue[1] + ' old - ' + oldValue[1]);
    console.log('checkbox-1: new - ' + newValue[2] + ' old - ' + oldValue[2]);
  },true);


",true)

如果您想深入了解它的工作原理，请阅读以下内容：

https://medium.com/@jbmilgrom/watch-watchgroup-watchcollection-and-deep-watching-in-angularjs-6390f23508fe

更新： https://jsfiddle.net/molikh/a0h5nujo/7/

Answer 3

这是 angular 1.6 中已确定的问题，他们将在 1.7 版本中修复此问题

https://github.com/angular/angular.js/issues/16392#issuecomment-355843405

Angular $watchCollection 旧值未针对多次更新正确更新

Angular $watchCollection old value is not updated properly for multiple updates

javascript

watch

angularjs