How to select a tab in a $watch function when changing array?

Question

I tried to use the tabs in Angular Material to facilitate the navigation between dates (just slide tabs to change date) and I have also a date picker to jump quickly to another date.

The loading work fine; I initialized the date picker with the current date and load tabs with each day in the current month.

If I select a date in another month, I reload the tabs to show appropriate dates. To do this, I've add a $watch on the date picker. This work fine but at the end of $watch I set tabSelected who is the index of the tab to display. That part don't work because it's like the digest process is not finish.

I think about a solution: just rename the tabs with new value. But is there a way to reset the array and set the index like I do:

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

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

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

The variable $scope.dateSelected itself is unchanged, because changing date only changes the variable' property. You have to watch the variable recursively, by adding the third argument to $watch as true.

Code:

$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

Further reading: $watch an object

edited May 23 '17 at 10:27

Community

1
1

answered Oct 29 '15 at 03:07

Laohyx

303
3
9

It don't work with true value. When I change month, the tabSelected (index) is set properly but the tab displayed is the first or the last... – Jonathan Anctil Oct 29 '15 at 13:59
@JonathanAnctil If the `$watch` detects the change, the code works. Many the html binding with `tabSeleteted` has something wrong... – Laohyx Oct 30 '15 at 08:51
I changed the way I modify the array, so now instead creating a new array, I change the data into the array. It work pretty well but now I have a problem and I think the cause come from the mdTabs from Material... – Jonathan Anctil Oct 30 '15 at 18:15

How to select a tab in a $watch function when changing array?

1 Answers1