CODEWITHSUNDEEP
javascriptangularjstabsangular-material
YourReflection
YourReflection

Reputation: 395

Prevent tab change event in angular material md-tab

Is it possible to prevent tab change in angular-material's md-tabs or md-tab directive? I use the md-on-select directive to execute a function once a tab is clicked and set the md-active value to false for a specific tab. But the tab switch still happens and I seem not to be able to prevent it:

<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 the controller function I have

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

Upvotes: 1

Views: 4289

Answers (1)

hame-dhib
hame-dhib

Reputation: 428

This is an exemple but im not sure if this what you want

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

});

I hope that help you

Upvotes: 2

Related Questions