AngularJS Select 来自按钮点击的选项卡

Question

使用 AngularJS 选项卡指令，有没有办法从按钮 select 选项卡。实际上，我想做的是单击按钮 'Select Tab 3'，第三个选项卡将被 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>

Answer 1

您可以使用 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>

AngularJS Select 来自按钮点击的选项卡

AngularJS Select Tab from Button Click

html

javascript

tabs

angularjs

angularjs-ng-click