Question

我想跟踪数组中项目的更改。请参阅示例here：

angular.module('watchApp', []).controller('watchCtrl', function($scope) {
$scope.items = [
    {value: 1},
    {value: 2},
    {value: 3}
];

$scope.newItems = [];
$scope.deleteItems = [];
$scope.modifiedItems = [];
$scope.$watchCollection('items', function(newVal, oldVal) {
    console.log(newVal);
    console.log(oldVal);
    for(var i=0; i<newVal.length; i++) {
        if (oldVal.indexOf(newVal[i])<0) {
            $scope.newItems.push(newVal[i]);
        }
    }
    for(var i=0; i<oldVal.length; i++) {
        if (newVal.indexOf(oldVal[i])<0) {
            $scope.deleteItems.push(oldVal[i]);
        }
    }
});
$scope.addOne = function () {
    $scope.items.push({value:$scope.items.length+1});
};
$scope.remove = function (it) {
    $scope.items.splice($scope.items.indexOf(it), 1);
};

}）;

我现在可以使用最新版本（1.5.0）的角度跟踪新添加和删除的项目。但是，我不知道如何获取数组中的修改项。简单地使用$watch('items', function..., true)不起作用。这将使所有项目成为新项目，并将所有旧项目删除，包括未更改的项目。

Answer 1

在$watchCollection函数中，您需要计算数组的两个版本之间的差异。我建议使用lodash。要检查项目是否已删除或添加，我会比较newValue和oldValue的长度。

$scope.$watchCollection('items', function (newValue, oldValue) {
    if (newValue.length > oldValue.length) {   
        console.log(_.difference(newValue, oldValue));
    } else {   
        console.log(_.difference(oldValue, newValue));
    } 
});

选中此JSFiddle进行简单演示。

如果您不想使用 lodash ，则需要手动比较两个数组。

如何通过angular $ watch或$ watchCollection

1 个答案: