Changing Tab using Button Click

Question

<div ng-cloak>
  <md-content>
   <md-tabs md-dynamic-height md-border-bottom>
  <md-tab label="one">
     <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>          
             <md-button class="md-raised">Save & Next</md-button>
    </md-content>
  </md-tab>
  <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
      <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised">Save & Back </md-button>
    </md-content>
  </md-tab>      
</md-tabs>

I am using angular + angular material , there are two tab menu "One" and "Two" when I clicked on "Save & Next" button next tab should be enabled and foucs goes to next tab and reverse things should happen when i clicked on second tab "Save & Back" button

Thomas Zoé · Accepted Answer · 2016-08-29T06:37:20.413

4

md-selected on md-tabs shows you the current index of the tabs. You can change the index with ng-click on the button. Should be something like the following

<div ng-cloak>
 <md-content>
  <md-tabs md-dynamic-height md-border-bottom md-selected="myTabIndex">
   <md-tab label="one">
    <md-content class="md-padding">
    <h1 class="md-display-2">Tab One</h1>          
         <md-button class="md-raised" ng-click="myTabIndex = myTabIndex+1">Save & Next</md-button>
    </md-content>
   </md-tab>
   <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
     <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised" ng-click="myTabIndex = myTabIndex-1">Save & Back </md-button>
    </md-content>
   </md-tab>      
</md-tabs>

But you should now if the next or previous tab is disabled, this method doesn't work, because you cannot switch to a tab which is disabled.

edited Aug 29 '16 at 06:37

answered Aug 29 '16 at 06:20

Thomas Zoé

423
3
16

Thanks for reply @Thomas but its not working even when i enabled both tab – User Aug 29 '16 at 06:32
Which version of angular and angular material do you use? – Thomas Zoé Aug 29 '16 at 06:33
I actually tried it now myself, myIndex++ does'nt work, so I used myIndex = myIndex + 1, now it should work – Thomas Zoé Aug 29 '16 at 06:39
Thanks @Thomas its worked for me . I want ask one more thing when i click on tab i want to call my data initalize function how to do it ? I tried with ng-click but its not work – User Aug 29 '16 at 06:43
What doesn't work? Wasn't the data shown? Wasn't it loaded? May you show me your code? The way loading data on ng-click should be work – Thomas Zoé Aug 29 '16 at 06:52
I got my Error its in controller function. Thanks once again – User Aug 29 '16 at 06:59

score 1 · Answer 2 · answered Sep 20 '17 at 05:52

You can use function in js for changing tab.

<md-button class="md-raised" ng-click="changetab('n')">Save & Next</md-button>
<md-button class="md-raised" ng-click="changetab('b')">Save & Back</md-button>

in .js

$scope.changetab = function(nav){
    if(nav == 'n')
      $scope.myTabIndex = $scope.myTabIndex +1;
    else
      $scope.myTabIndex = $scope.myTabIndex -1;
}

score 0 · Answer 3 · answered Aug 29 '16 at 06:32

0

In md-tab you can use md-active="scopeName".

md-active When true, sets the active tab. Note: There can only be one active tab at a time.

Create a scopeArray which is contain all tab active info. And use it with scopeArray[index] in md-active.

answered Aug 29 '16 at 06:32

hurricane

6,521
2
34
44

Changing Tab using Button Click

3 Answers3