AngularJS：$腕表未触发更改为对象的数组 [英] AngularJS: $watch not being triggered for changes to an array of objects

问题描述

我有一个表，用户可以选择在基于对这些列某些列和一定值的表来过滤行。对象结构，以保持该滤波器的轨迹是这样的：

I have a table and the user can chose to filter rows in the table based on certain columns and certain values for these columns. The object structure to keep track of this filter looks like:

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

所以在阵列中的对象包含COLUMNNAME和值键。 COLUMNNAME表示列考虑为过滤器，而价值包含过滤器值。基本上，上述的阵列将导致在该城市列包含LA表中的行，OT或纽约作为值和天气列包含湿润或晴天作为值。不含有这些值其他行未示出。

So the objects in the array contain the "columnName" and "values" key. "columnName" signifies the column to consider for the filter while "values" contains the filter values. Basically, the above array will result in rows in the table for which the city column contains "LA", "OT" or "NY" as values and the weather column contains "humid" or "sunny" as the values. Other rows which do not contain these values are not shown.

要帮助理解这个对象更好，如果用户希望只看到谁拥有LA或NY的行为城市之列，得到的阵列将是这样的：

To help understand this object better, if the user wishes to see only those rows who have "LA" or "NY" in the column for "city", the resultant array will look like:

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

用户设置或删除这些过滤器。发生这种情况时，上述的阵列被更新。
此更新正确执行，我已经验证了它 - 这里没有问题。

The user sets or removes these filters. Whenever this happens, the above array is updated. This update happens correctly and I have verified it - no problem here.

问题出在$腕表（）。我有以下的code：

The problem lies with the $watch(). I have the following code:

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

在 $ scope.activeFilterAttributes 正确更新，当用户更新了UI的过滤器，当此更新不会触发$手表。这是触发第一次当应用程序加载，但未来的更新有没有这方面的影响。

While $scope.activeFilterAttributes is updated properly as and when the user updated the filter in the UI, the $watch is not triggered when this is updated. It is triggered the first time when the application loads but future updates have no effect on this.

我创建了一个小提琴证明这一点： http://jsfiddle.net/nCHQV/

I have created a fiddle to demonstrate this: http://jsfiddle.net/nCHQV/

在小提琴， $ scope.info 重新presents的表行，可以这么说，结果
$ scope.data 重新presents过滤器。结果
点击该按钮相当于更新滤波器（在小提琴的情况下 - 数据），因此在更新表中显示的行（在小提琴的情况下 - 的信息）。但可以看出，该信息不被更新上点击按钮。

In the fiddle, $scope.info represents the rows of the table, so to speak;
$scope.data represents the filter.
Clicking on the button is equivalent to updating the filter(in the case of the fiddle - the data) and thus updating the rows displayed in the table(in the case of the fiddle - the info). But as can be seen, the info is not updated on clicking the button.

不应该 $范围。$看被触发时的对象变化的阵列？

Shouldn't $scope.$watch be triggered when the array of objects changes?

推荐答案

的 $观看方法采用所谓的第三个可选参数 objectEquality ，检查这两个对象是相等的，而不仅仅是共享相同的参考的。这不是默认行为，因为它是比基准检查一个更昂贵的操作。没有被触发你的手表，因为它仍然指向同一个对象。

The $watch method takes an optional third parameter called objectEquality that checks that the two objects are equal, rather than just share the same reference. This is not the default behavior because it is a more expensive operation than the reference check. Your watch isn't being triggered because it still refers to the same object.

查看文档获取更多信息。

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

添加该参数，一切都很好。

Add that parameter and all is well.

这篇关于AngularJS：$腕表未触发更改为对象的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！