3

I have a md-tabs tag which 2 md-tab tags:

        <md-tabs id="tabs" class="md-accent" md-align-tabs="top" md-dynamic-height>
            <md-tab id="tab1">
                <md-tab-label>Tab 1</md-tab-label>
                <md-tab-body>
                    <div ng-include="'tab1.html'"></div>
                </md-tab-body>
            </md-tab>
            <md-tab id="tab2">
                <md-tab-label>Tab 2</md-tab-label>
                    <md-tab-body>
                        <div ng-include="'tab2.html'"></div>
                    </md-tab-body>
            </md-tab>
        </md-tabs>

I can switch between them properly by clicking in them (in the menu) but what I want is to be able to perform click on tab1 for example. Let's say that inside on tab2 I make a submit via AJAX and once I get the success I want to switch automatically to tab1.

I've tried lot of things, I've set the attribute selectedIndex from md-tabs, I've set the attribute md-active of md-tab to true. I've also tried to call the method which supposedly is fired by event click (select() from $mdTabsCtrl). But obviously nothing of this has worked.

So, how can I switch to a specific tab when I click one of my custom buttoms?

Drumnbass
  • 867
  • 1
  • 14
  • 35
  • Is [this](http://codepen.io/anon/pen/WrMxWo) what you mean? Click on button map inside tab 1 and automatically you'll switch to tab 2. – troig May 11 '16 at 12:50
  • Yup, that's it, but it doesn't work in my code, still dunno why. – Drumnbass May 11 '16 at 13:30
  • Maybe you can try to make a plunker to reproduce the problem, it will be easier to help you. – troig May 11 '16 at 13:44

2 Answers2

2

You can directly change the value of selectedIndex in success block (selectedIndex value for the tab you wanna go).

In case you want to go to a specific tab then in a method put the selectedIndex value of the tab you wanna go..
to go on tab1 here is the method

$scope.firstTab = function() {
   $scope.selectedIndex = 0;
};

Calling this method after getting ajax call successful will always take you to first tab. And for moving to next tab after every click here is the method

$scope.max = (number of tabs) - 1;
$scope.nextTab = function() {
   var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
   $scope.selectedIndex = index;
};
Rakesh Chand
  • 3,105
  • 1
  • 20
  • 41
  • Rakeschand, what's `vm`? – Drumnbass May 11 '16 at 12:43
  • Btw, I don't really have 2 tabs, it was just an example, in fact I have 6 tabs. – Drumnbass May 11 '16 at 12:44
  • 1
    no problem for six tabs max will be 5 and I guess you are using $scope approach so don't worry about vm.. consider it as $scope.max – Rakesh Chand May 11 '16 at 12:47
  • At the moment it doesn't... but it should, I'm messing with my code trying to figure out what I'm doing wrong... – Drumnbass May 11 '16 at 13:30
  • why don't you create a plnkr and reproduce your problem? – Rakesh Chand May 11 '16 at 13:40
  • I got it, it was just a misspelling in my code :( your solution is good, but you missunderstood what I wanted to do. It wasn't to go to the next tab, but just to go to the first tab (a specific tab). Correct your answer just in case another one comes here with the same problem and I'll mark it as accepted ;) thanks!! – Drumnbass May 11 '16 at 13:58
  • I'm sorry but I can't accept your answer until it isn't clear. – Drumnbass May 12 '16 at 06:47
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111706/discussion-between-rakeschand-and-drumnbass). – Rakesh Chand May 12 '16 at 07:03
2

this works every time: angular.element("md-tab md-tab-item")[0].click()

Note: you may have to wrap this in a $timeout (i.e. setTimeout) if you are calling it from a function inside an angular controller to avoid apply error.

Community
  • 1
  • 1
mrogunlana
  • 827
  • 9
  • 11