AngularJS:对象数组的更改不会触发 $watch

Question

我有一个表，用户可以选择根据某些列和这些列的某些值来过滤表中的行。跟踪此过滤器的对象结构如下所示:

$scope.activeFilterAttributes = [
    {
        "columnName": "city",
        "values": ["LA", "OT", "NY"]
    },
    {
        "columnName": "weather",
        "values": ["humid", "sunny"]
    }
];

因此数组中的对象包含“columnName”和“values”键。 “columnName”表示要考虑用于过滤器的列，而“values”包含过滤器值。基本上，上面的数组将导致表中的行包含“LA”、“OT”或“NY”作为值，而天气列包含“humid”或“sunny”作为值。不显示不包含这些值的其他行。

为了帮助更好地理解此对象，如果用户希望仅查看“city”列中包含“LA”或“NY”的行，则结果数组将如下所示:

$scope.activeFilterAttributes = [
    {
        "columnName": "city",
        "values": ["LA", "NY"]
    },
    {
        "columnName": "weather",
        "values": []
    }
];

用户设置或删除这些过滤器。每当这种情况发生时，上面的数组就会被更新。此更新正确进行，并且我已经验证了它 - 这里没有问题。

问题出在 $watch() 上。我有以下代码:

$scope.$watch('activeFilterAttributes', function() {
    //Code that should update the rows displayed in the table based on the filter
}}

虽然当用户更新 UI 中的过滤器时 $scope.activeFilterAttributes 会正确更新，但更新时不会触发 $watch。当应用程序加载时第一次触发它，但以后的更新对此没有影响。

我创建了一个 fiddle 来演示这一点:http://jsfiddle.net/nCHQV/

在 fiddle 中，$scope.info 可以说代表表格的行；
$scope.data 表示过滤器。
单击按钮相当于更新过滤器(在 fiddle 的情况下 - 数据)，从而更新表中显示的行(在 fiddle 的情况下 - 信息)。但可以看出，单击按钮后信息不会更新。

当对象数组发生变化时，不应该触发$scope.$watch吗？

Answer 1

$watch 方法采用名为 objectEquality 的可选第三个参数，用于检查两个对象是否相等，而不仅仅是共享相同的引用。这不是默认行为，因为它是比引用检查更昂贵的操作。您的 watch 没有被触发，因为它仍然引用同一个对象。

请参阅docs了解更多信息。

$scope.$watch('activeFilterAttributes', function() {
  // ...
}, true); // <-- objectEquality

添加该参数，一切顺利。