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的旧值列表未正确更新，并且会保留旧值。

e.g。

所有复选框最初都是取消勾选
勾选第一个复选框 - ＆gt; oldValue = [false，false，false]，newValue = [true，false，false]
立即勾选第二个复选框 - ＆gt; oldvalue = [false，false，false]，newValue = [true，true，false]

在旧值列表中，第一个值应为true，因为我们在第一个操作中将其更改为true。但它仍然是最初的一个

我知道我可以通过使用模型值更新复选框变量并为模型添加监视来解决此问题。谁会有任何想法使用$ watchCollection方法来解决这个问题？

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

Answer 1

尝试添加：

$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 2

试试这个：

<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 3

这是角度1.6中的已识别问题，他们将使用1.7版本来解决此问题

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

对于多个更新，Angular $ watchCollection旧值未正确更新

3 个答案: