CODEWITHSUNDEEP
angularjstabsangular-material
Dallin
Dallin

Reputation: 1074

Md tabs with ng-hide - keep the previously selected tab active

I'm working with a set of tabs in which there are tabs that are to be hidden and shown dynamically.

The problem is that when a tab goes from being hidden to visible, it becomes the selected tab. I wish for the previously selected tab to still be selected after tabs are shown.

Here's a simple example. In this case, if "Three" is selected, and I hit the button to show the "Two" tab, I want "Three" to still be selected.

https://jsfiddle.net/b5aw533a/2/

Here's an example of how I tried using md-active to achieve this

https://jsfiddle.net/pspL9c7s/1/

Upvotes: 0

Views: 1072

Answers (1)

floribon
floribon

Reputation: 19183

Your problem is that $scope.selectedTab is equal to 2, which is the index of the selected tab.

When you add a new tab, then you should updated $scope.selectedTab accordingly.

Basically if you add a tab before the selected one, you should increment the index of the selected tab with $scope.selectedTab++. If the new tab comes after, then you don't have to.

$scope.showTab = function() {
  // we add a tab before, so we update the index of the selected one
  $scope.selectedTab++;
  $scope.shouldShow = true;
}

https://jsfiddle.net/v8jL75tf/

Upvotes: 0

Related Questions