CODEWITHSUNDEEP
angularjsmaterial-designangular-material
user615611
user615611

Reputation: 184

Material design md-tabs with angularjs

I have a question regarding material design md-tabs control. I am using md-tabs with Angularjs on one of the pages and it works fine. I also have a md-button on that page and what we want to do is, when user click that button we want to move to the next tab. I am new to this whole material-angular thing and would appreciate if somebody could guide me in right direction.

Upvotes: 3

Views: 10650

Answers (2)

Praveen Singh
Praveen Singh

Reputation: 2569

You can use the md-selected attribute on md-tabs directive. md-tabs uses md-selected attribute to decide which tab is selected. So you can simply update $scope.selectedTab on click of your md-button to select the desired tab.

Have a look at this code snippet: 

angular.module("material", ["ngMaterial", "ngAnimate"])

.controller("tabCtrl", ["$scope", function($scope) {
    $scope.selectedTab = 0;
    
    $scope.changeTab = function() {
        if ($scope.selectedTab === 2) {
            $scope.selectedTab = 0;
        }
        else {
            $scope.selectedTab++;
        }
        
    }
}]);
.tab-content {
    margin: 20px 0 0 0;
    text-align:center;
}

.tab-container {
    height:120px;
}

.tab-change-row {
    text-align:center;
}

.tab-change-btn {
    display: inline-block
}
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<body ng-app="material">
    <div ng-controller="tabCtrl">
        <div class="tab-container">
            <md-tabs md-selected="selectedTab">
                <md-tab label="One">
                    <p class="tab-content">Tab One content</p>
                </md-tab>
                <md-tab label="Two">
                    <p class="tab-content">Tab Two content</p>
                </md-tab>
                <md-tab label="Three">
                    <p class="tab-content">Tab Three content</p>
                </md-tab>
            </md-tabs>      
        </div>
       
        
        <div class="tab-change-row">
            <md-button class="tab-btn md-raised" ng-click="changeTab()">Change Tab</md-button>    
        </div>
        
    </div>
</body>

Upvotes: 9

VISHNU
VISHNU

Reputation: 966

we can use "selectedIndex" for doing this, put the tab index value as selectedindex then it will make that tab active, we can use selectedIndex in <md-tab-group> it will start from zero. For more details please review tabs

Upvotes: 0

Related Questions