使用按钮单击更改选项卡

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 ，当我点击 "Save & Next" 按钮时，有两个选项卡菜单 "One" 和 "Two" 下一个选项卡应该是启用并且焦点转到下一个选项卡，当我单击第二个选项卡时应该发生相反的事情 "Save & Back" 按钮

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>

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

Answer 2

在 md-tab 中你可以使用 md-active="scopeName".

md-active When true, sets the active tab. Note: There can only be one active tab at a time.

创建一个包含所有选项卡活动信息的 scopeArray。并在 md-active.

中与 scopeArray[index] 一起使用

Answer 3

您可以在js中使用函数来更改标签。

<md-button class="md-raised" ng-click="changetab('n')">Save & Next</md-button>
<md-button class="md-raised" ng-click="changetab('b')">Save & Back</md-button>

在 .js 中

$scope.changetab = function(nav){
    if(nav == 'n')
      $scope.myTabIndex = $scope.myTabIndex +1;
    else
      $scope.myTabIndex = $scope.myTabIndex -1;
}

使用按钮单击更改选项卡

Changing Tab using Button Click

angularjs

angularjs-material