2017-10-12 12 views
0

角度材料のmd-tabまたはmd-tabディレクティブのタブ変更を防止できますか? md-on-selectディレクティブを使用して、タブをクリックすると関数を実行し、特定のタブに対してmd-active値をfalseに設定します。しかし、タブの切り替えはまだ起きて、私はそれを防止することができないように思われる:コントローラ機能で角度材料md-tabのタブ変更イベントを防止する

<md-content> 
     <md-tabs md-dynamic-height md-border-bottom> 
      <md-tab label="Tab1" md-active="ctrl.selectTab1" md-on-select="ctrl.tabClicked('Tab1')"> 
       <md-content> 
        myContent 
       </md-content> 
      </md-tab> 
      <md-tab label="Tab2" md-active="ctrl.selectTab2" md-on-select="ctrl.tabClicked('Tab2')"> 
       <md-content> 
        mycontent 
       </md-content> 
      </md-tab> 
     </md-tabs> 
</md-content> 

を私はこれがexempleがある

function tabClicked(tab) { 
     switch (tab) { 
      case 'Tab1': 
       vm.selectTab1 = true; 
       vm.selectTab2 = false; 
       break; 
      case 'Tab2': 
       vm.selectTab1 = false; 
       vm.selectTab2 = true; 
       break; 
     } 
} 
+0

ヘルプは、私はあなたの質問を理解していないことを願っています。特定のタブを無効にしますか? – Founded1898

+0

同じタブを無効にする場合は、md-active = "false"の代わりにng-disabledタグを使用できます。 –

+0

いいえ、タブの変更を防止します。例:最初は最初のタブページにあり、2番目のタブをクリックします。2番目のタブには変更せずに1番目のタブに変更します。 – YourReflection

答えて

1

持っていますが、これはあなたが望むかどうかわからないイム

Exemple

<div ng-app="myApp"> 
<div ng-controller="MyCtrl"> 
    <md-content> 
     <md-tabs md-dynamic-height md-border-bottom md-selected="selected" > 
      <md-tab label="Tab1" ng-click="tabClicked('Tab1')"> 
       <md-content> 
        myContent 1 
       </md-content> 
      </md-tab> 
      <md-tab label="Tab2" ng-click="tabClicked('Tab2')"> 
       <md-content> 
        mycontent 2 
       </md-content> 
      </md-tab> 
     </md-tabs> 
    </md-content> 
</div> 

angular.module("myApp",['ngMaterial']).controller("MyCtrl", function($scope) { 

    $scope.selected = 0 

    $scope.tabClicked = function(tab) { 
    switch (tab) { 
     case 'Tab1': 
      $scope.selected = 0 
      break; 
     case 'Tab2': 
      $scope.selected = 0 
      break; 
    } 
    } 

}); 

私はあなたが

+0

ありがとうございます。昨日もこの解決策を見つけました:) – YourReflection

+0

これは、md-tabが次のタブに移動するのを妨げていません。それは実際に動いて、前に戻る。実際にはmd-tabが動かないようにする方法があるのだろうかと思います。これは、移動する前にデータを確認するのに役立つでしょう。 – alexandergs