防止角材料中的標籤更改事件md-tab

是否可以防止角材料的md-tabs或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>

在控制器功能我有

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

來源

2017-10-12 YourReflection

我不明白你的問題。你想「禁用」某個標籤嗎？ – Founded1898

如果要禁用相同的選項卡，可以使用ng-disabled標記而不是md-active =「false」 –

不，我想阻止選項卡更改。例如：最初我在第一個標籤頁上，然後單擊第二個標籤，我不想更改爲第二個標籤，但保留在第一個標籤上。 – YourReflection

這是個例，但林不知道，如果這你想要什麼

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

});

我希望能夠幫助您

來源

2017-10-12 15:37:49

謝謝。我昨天也找到了這個解決方案:) – YourReflection

這並不妨礙md-tab移動到下一個選項卡。它實際上移動，然後回到以前。我想知道是否有辦法實際防止md-tab移動。這可以幫助我們在移動之前驗證數據。 – alexandergs

防止角材料中的標籤更改事件md-tab

回答

相關問題