从按钮单击中选择“AngularJS”选项卡

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.

使用AngularJS制表符指令，可以从按钮中选择制表符。实际上，我想做的是单击“选择选项卡3”按钮，然后选择第三个选项卡。

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

1 个解决方案

#1

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

您可以在md-tabs中使用md-selected属性来选择所选的选项卡，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>