Search code examples
angularjsangularjs-material

Changing Tab using Button Click


<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


Solution

  • 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.