$watchCollection() 与嵌套数组答案

【问题标题】：$watchCollection() with Nested Arrays$watchCollection() 与嵌套数组
【发布时间】：2014-09-12 07:39:30
【问题描述】：

我有一个嵌套数组的形式：

$scope.itinerary = 
    [
        [
          {name:'x'},
          {name:'y'},
          {name:'z'}
        ],
        [
          {name:'a'},
          {name:'b'},
          {name:'c'}
        ]
    ]

我正在使用以下内容进行 $watchCollection ：

$scope.$watchCollection(function () {
            return $scope.itinerary;
        }, 
        function () {
            console.log("Changed")
        }
);

但console.log() 仅在删除子数组之一或插入新数组时才会执行。如果我将一个元素从一个数组移动到另一个数组，则什么也不会发生。（例如，当我将{name:'a'} 从一个数组移动到另一个数组时，什么也没有发生）。如何在嵌套数组上放置手表？

【问题讨论】：

标签： javascript arrays angularjs

【解决方案1】：

使用深度观察 $watch() 函数采用第三个可选参数来表示“对象相等性”。如果你为这个参数传入“true”，AngularJS 实际上会执行一个深度对象树比较。这意味着在每个 $digest 中，AngularJS 将检查新旧值是否具有相同的结构（不仅仅是相同的物理引用）。这使您可以监视更大的景观；但是，深度对象树比较的计算成本要高得多。

$scope.$watch('itinerary',function (newVal,oldVal) {
          console.log(newVal)      

 },true);

【讨论】：

【解决方案2】：

您应该使用 $watch 并将第三个参数设置为 true，而不是使用 $watchCollection。

这会起作用，但如果数组很大，这对性能来说也是一个坏主意，因此请谨慎使用。

使用 angular.eaquals 与使用 angular.copy 获得的复制对象进行比较。

更多详情请访问https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

【讨论】：