Question

我的问题很简单，但经过大量的搜索，我无法找到答案。是否有任何方法可以在添加新元素时监视数组以进行更改并触发函数，例如，可以对元素进行安慰。

$ watchExpression在数组中推送新元素时工作正常但它没有提供有关所添加元素的任何信息。我正在考虑实现一个有两个变量的函数，一个在添加新元素之前包含数组，另一个变量保存数组的新状态并比较它们，所以我可以找到添加的元素，但这个解决方案看起来非常不干净并且效率低下。有没有更好的解决方案？

提前谢谢

我试过了：

$scope.names = ['igor', 'matias', 'misko', 'james'];

$scope.$watchCollection('names', function(newNames, old) {
  console.log(newNames);
  console.log(old);
});

$scope.names.push("john");

但输出是这样的：

[＆＃34; igor＆＃34;，＆＃34; matias＆＃34;，＆＃34; misko＆＃34;，＆＃34; james＆＃34;，＆＃34; john＆＃34;] < / p>
[＆＃34; igor＆＃34;，＆＃34; matias＆＃34;，＆＃34; misko＆＃34;，＆＃34; james＆＃34;，＆＃34; john＆＃34;] < / p>

Answer 1

您可以使用lodash的_.difference。

https://github.com/rockabox/ng-lodash

$scope.$watch('scopeToWatch', function(newVal, oldVal){
var changed;
changed = lodash.difference(oldVal, newVal);
console.log(changed);
})

如果您想查看是否添加或删除了某个项目，请执行以下操作：

        $scope.$watch('scopeToWatch', function(newVal, oldVal){
    var change;
    if(newVal.length>oldVal.length){
    change = 'added';
    } else if(newVal.length<oldVal.length) {
    change = 'removed';
    } else {
    change = 'none'
    }

        var changed;
        changed = lodash.difference(oldVal, newVal);
if(change !== 'none'){
        console.log(changed+ 'was '+ change);
} else {
        console.log('no change');

}
    })

Answer 2

我能想到的唯一有效的解决方案是覆盖给定阵列的推送功能。当然，您也可以根据需要将其应用于.concat等。当然，您也可以将此覆盖过程重构为函数/服务，以获得更好的代码样式。这仅用于演示目的：

var x = [1,2,3];  // define the initial array
x._push = x.push; // "backup" the normal push function
x.push = function () {
    x._push(a);   // do the normal push
    console.log ('added: ' + a); // do your magic here...
};

x.push (4);

我希望这会有所帮助

Answer 3

输出的问题在于浏览器控制台不会异步记录数组的副本，而只记录数组的引用。当您在控制台中打开阵列后（例如，假设Google-Chrome的开发者控制台），它将在检查它时显示它包含的元素，而不是在正式记录时它所具有的元素。您可以采取的措施是避免这种情况，而是记录数组的副本。所以问题实际上是console.log函数本身，而不是你的代码。尝试

console.log (old.slice());

而不是

console.log (old);

这会生成一个数组的副本，因此数组应该按原样记录，因为它之后不会被更改。

Angular js watchexpression cacth新元素

3 个答案: