タブ使用ボタンは、私は、角+角度材料を使用しています

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> 

をクリックして変更し、私は「保存&次へ」ボタンをクリックしたときに、2つのタブメニュー「ワン」と「2つは」次のタブがあるべきあります2番目のタブ「Save & Back」ボタンをクリックすると、逆のことが起こるはずです。

Answer 1

md-tabsのmd-selectedは、タブの現在のインデックスを表示します。 ボタンをクリックしてインデックスを変更することができます。 は、以下の

<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 trueの場合、アクティブなタブを設定します。注：一度に有効なタブは です。

すべてのタブアクティブ情報を含むscopeArrayを作成します。そしてそれをmd-activeのscopeArray [index]と共に使用してください。

Answer 3

jsの関数を使用してタブを変更することができます。 .jsファイル

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