更改数组时如何在 $watch 函数中选择选项卡？

Question

我尝试使用 Angular Material 中的标签来促进日期之间的导航（只需滑动标签来更改日期），我还有一个日期选择器可以快速跳转到另一个日期。

加载工作正常；我用当前日期初始化日期选择器，并在当月的每一天加载标签。

如果我选择另一个月份的日期，我会重新加载选项卡以显示适当的日期。为此，我在日期选择器上添加了一个 $watch。这工作正常，但在 $watch 结束时我设置 tabSelected 谁是要显示的选项卡的索引。那部分不起作用，因为它就像摘要过程没有完成。

我想到了一个解决方案：只需用新值重命名选项卡。但是有没有办法像我一样重置数组并设置索引：

$scope.$watch('dateSelected', function (newValue, oldValue) {
    if ((newValue.getMonth() != oldValue.getMonth())
        || (newValue.getFullYear() != oldValue.getFullYear())) {
        $scope.tabs = initialiseGamesTabs($scope.dateSelected);
    }

    $scope.tabSelected = getTabSelected();
});

Answer 1

变量$scope.dateSelected 本身没有改变，因为改变日期只会改变变量的属性。您必须通过将第三个参数添加到$watch 作为true 来观察变量recursively。

代码：

$scope.$watch('dateSelected', function (newValue, oldValue) {
    if ((newValue.getMonth() != oldValue.getMonth())
        || (newValue.getFullYear() != oldValue.getFullYear())) {
        $scope.tabs = initialiseGamesTabs($scope.dateSelected);
    }

    $scope.tabSelected = getTabSelected();
}, true); // <----------- add true here

进一步阅读： $watch an object