angularjs - 使用按钮单击更改选项卡

Question

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

我正在使用 angular + angular material ，当我单击“保存和下一步”按钮时，有两个选项卡菜单“一个”和“两个”，下一个选项卡应该被启用并且焦点转到下一个选项卡并且当我点击了第二个选项卡“保存并返回”按钮

Answer 1

md-selected on md-tabs 显示选项卡的当前索引。 您可以使用 ng-click 按钮更改索引。 应该像下面这样

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

但是现在如果下一个或上一个选项卡被禁用，则此方法不起作用，因为您无法切换到被禁用的选项卡。