2017-10-12 1 views
0

Ist es möglich, Registeränderungen in den md-tabs oder md-tab-Anweisungen von angular-material zu verhindern? Ich verwende die Direktive md-on-select, um eine Funktion auszuführen, nachdem auf eine Registerkarte geklickt wurde, und setze den Wert md-active für eine bestimmte Registerkarte auf false. Aber die Registerkarte Schalter immer noch geschehen und ich scheine nicht in der Lage sein, es zu verhindern:Register-Änderungsereignis im eckigen Material verhindern 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> 

In der Controller-Funktion habe ich

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

Ich verstehe Ihre Frage nicht. Möchten Sie eine bestimmte Registerkarte deaktivieren? – Founded1898

+0

Wenn Sie dieselben Registerkarten deaktivieren möchten, können Sie das ng-disabled-Tag anstelle von md-active = "false" verwenden. –

+0

Nein, ich möchte die Änderung der Registerkarte verhindern. Beispiel: Anfangs bin ich auf der ersten Registerkarte, und ich klicke auf die zweite Registerkarte, ich möchte nicht auf die zweite Registerkarte wechseln, sondern auf der ersten bleiben. – YourReflection

Antwort

1

Dies ist ein exemple ist, aber ich bin nicht sicher, ob das, was Sie wollen

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

}); 

Ich hoffe, dass Ihnen helfen

+0

Danke. Ich habe diese Lösung gestern auch gefunden :) – YourReflection

+0

Dies verhindert nicht, dass der md-Tab zum nächsten Tab wechselt. Es bewegt sich tatsächlich und dann zurück zum vorherigen. Ich frage mich, ob es eine Möglichkeit gibt, die Bewegung des MD-Tabs zu verhindern. Das wäre beispielsweise für die Überprüfung der Daten vor dem Verschieben hilfreich. – alexandergs

Verwandte Themen