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-29 06:37:20Z

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, 2016 at 6:37

answered Aug 29, 2016 at 6:20

Thomas Zoé

4233 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

User Over a year ago

Thanks for reply @Thomas but its not working even when i enabled both tab

Thomas Zoé Over a year ago

Which version of angular and angular material do you use?

Thomas Zoé Over a year ago

I actually tried it now myself, myIndex++ does'nt work, so I used myIndex = myIndex + 1, now it should work

User Over a year ago

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

Thomas Zoé Over a year ago

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

|

Antony Joslin · Accepted Answer · 2017-09-20 05:52:21Z

1

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;
}

answered Sep 20, 2017 at 5:52

Antony Joslin

3195 silver badges17 bronze badges

Comments

hurricane · Accepted Answer · 2016-08-29 06:32:42Z

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, 2016 at 6:32

hurricane

6,7342 gold badges39 silver badges45 bronze badges

Collectives™ on Stack Overflow

Changing Tab using Button Click

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related