2017-10-12 5 views
0

Est-il possible d'empêcher le changement de tabulation dans les onglets md ou la directive md-tab de matériau angulaire? J'utilise la directive md-on-select pour exécuter une fonction après avoir cliqué sur un onglet et définir la valeur md-active sur false pour un onglet spécifique. Mais l'interrupteur de tabulation arrive encore et je semble ne pas être en mesure de l'empêcher:Éviter un changement de tabulation dans un matériau angulaire 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> 

Dans la fonction de contrôleur je

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

Je ne comprends pas votre question. Voulez-vous désactiver un certain onglet? – Founded1898

+0

Si vous voulez désactiver les mêmes onglets, vous pouvez utiliser la balise ng-disabled au lieu de md-active = "false" –

+0

Non, je souhaite empêcher le changement d'onglet. Exemple: au départ je suis sur la première page de l'onglet, et je clique sur le second onglet, je ne veux pas passer au second onglet mais rester sur le premier. – YourReflection

Répondre

1

Ceci est un exemple, mais je ne suis pas sûr si ce que vous voulez

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

}); 

J'espère que vous aider

+0

Merci. J'ai aussi trouvé cette solution hier :) – YourReflection

+0

Cela n'empêche pas le md-tab de passer à l'onglet suivant. Il se déplace réellement, puis revenir à la précédente. Je me demande s'il existe un moyen d'empêcher le déplacement de l'onglet md. Cela aiderait, disons, à vérifier les données avant de déménager. – alexandergs