AngularJS从按钮中选择选项卡点击

Question

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

Answer 1

可以使用MD-选择属性，MD-标签来选择所选择的选项卡，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>