AngularJS Select Tab from Button Click

Question

Using the AngularJS tabs directive, is there a way to select a tab from a button. Effectively what I would like to do is click the button 'Select Tab 3' and the third tab will be selected.

 <md-button id="button" class="md-raised">Select Tab Three</md-button>

<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-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
      </md-tab>
      <md-tab label="three" id="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

Fetrarij · Accepted Answer · 2017-09-13 04:06:58Z

3

You can use md-selected attribute in md-tabs to choose the selected tab,https://material.angularjs.org/latest/api/directive/mdTabs

<md-button id="button" ng-click="selectedTab = 2" class="md-raised">Select Tab Three</md-button>

<div ng-cloak>
  <md-content>
    <md-tabs  md-selected="selectedTab" md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
      </md-tab>
      <md-tab label="three" id="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

answered Sep 13, 2017 at 4:06

Fetrarij

7,3463 gold badges33 silver badges39 bronze badges

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

1 Comment

Henry Blue Over a year ago

Perfect! Exactly what I was after. Cheers!

Collectives™ on Stack Overflow

AngularJS Select Tab from Button Click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related