Question

是否可以通过$ scope检测已删除或添加的项目。$ watch？

请参阅以下示例：

var data = [{id: 1}, {id: 2}, {id: 3}];

$scope.$watch(function () {return data}, function (newValue, oldValue) {
    console.log(newValue, oldValue);
    // I want to detect removing or adding here:
    // var removedItem = ...?
    // var addedItem = ...?
}, true)

data.push({id: 4});
data.splice(0, 1);

由于

Answer 1

此代码适用于我

x = []

$rootScope.$watch((-> x), (newValue, oldValue) ->

    changed = newValue.filter((item, index) ->
        return oldValue[index] and angular.equals(item, oldValue[index]) is no
    )
    added = newValue.filter((item, index) ->
        return not oldValue[index]
    )
    removed = oldValue.filter((item, index) ->
        return not newValue[index]
    )
    console.log('x', changed, added, removed)
, yes)

Answer 2

AngularJS正在对此集合进行脏处理，并且由于您的执行速度非常快，因此在第二次 .splice()更改之前，您的控制台日志才会运行。

试试这个，添加$timeout(function () { }并将.splice()代码放在那里，现在注意console.log的内容。

例如：

// Make sure to add the $timeout dependency
$timeout(function () {
    data.splice(0, 1);
}, 1000);

现在，您可以将这些变量中的内容保存起来，并注意是否有任何差异。

这是一个供参考的jsfiddle，你可以看到对象的差异。的 jsFiddle demo

Answer 3

没有直接的方法来实现这一目标。可能你可以使用下面的结果。

//显示newValue。 var diff = $（newValue）.not（oldValue）.get（）;

//显示oldValue。 var diff = $（oldValue）.not（newValue）.get（）;

Answer 4

您可以使用$watchCollection。

来自文档：

通过标准$watch操作观察[...]集合，并在每次调用$digest()时进行检查，以查看是否已添加，删除或移动任何项目。

如何在$ scope中检测已删除的项目。$ watch？

4 个答案: