AngularJS：对于数组数组的更改,不会触发$watch

发布时间：2020-12-17 08:13:31 所属栏目：安全来源：网络整理

导读：我有一张表，用户可以根据这些列的某些列和某些值，选择在表中过滤行。跟踪此过滤器的对象结构如下所示： $scope.activeFilterAttributes = [ { "columnName": "city","values": ["LA","OT","NY"] },{ "columnName": "weather","values": ["humid","sunny"]

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

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

因此，数组中的对象包含“columnName”和“values”键。 “columnName”表示要筛选的列，“values”包含过滤器值。基本上，上述数组将导致表中的行列为“LA”，“OT”或“NY”作为值，气象列包含“潮湿”或“阳光”作为值。不显示其他不包含这些值的行。

为了更好地理解这个对象，如果用户只希望在“city”列中看到只有“LA”或“NY”的行，则结果的数组将如下所示：

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

用户设置或删除这些过滤器。无论何时发生这种情况，上述数组都会更新。
此更新正确发生，我已经验证了 – 这里没有问题。

问题在于$ watch()。我有以下代码：

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

虽然$ scope.activeFilterAttributes在用户更新UI中的过滤器时正确更新，但是在更新时不会触发$ watch。在应用程序加载时第一次触发，但未来更新对此不起作用。

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

在小提琴中，$ scope.info代表桌子的行，可以这么说;
$ scope.data表示过滤器。
点击按钮等同于更新过滤器(在小提琴的情况下 – 数据)，从而更新表中显示的行(在小提琴的情况下 – 信息)。但是可以看出，点击按钮的信息不会更新。

不应该是$ scope。当对象数组发生变化时，会触发$ watch？

$ watch方法接受一个可选的第三个参数，称为objectEquality，它检查两个对象是否相等，而不是共享相同的引用。这不是默认行为，因为它比参考检查更昂贵的操作。您的手表未被触发，因为它仍然指向同一个对象。

有关更多信息，请参阅docs。

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!