使用 angularjs 的材料设计 md-tabs答案

【问题标题】：Material design md-tabs with angularjs使用 angularjs 的材料设计 md-tabs
【发布时间】：2015-10-14 05:07:24
【问题描述】：

我有一个关于材料设计 md-tabs 控制的问题。我在其中一个页面上使用 md-tabs 和 Angularjs，它工作正常。我在该页面上还有一个 md 按钮，我们想要做的是，当用户单击该按钮时，我们想要移动到下一个选项卡。我对这整个材料角度的事情很陌生，如果有人能引导我朝着正确的方向前进，我将不胜感激。

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案1】：

您可以在md-tabs 指令上使用md-selected 属性。 md-tabs 使用 md-selected 属性来决定选择哪个选项卡。因此，您只需单击 md-button 即可更新 $scope.selectedTab 以选择所需的选项卡。

看看这段代码sn-p：

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>

【讨论】：

太棒了，很好的答案！

【解决方案2】：

我们可以使用“selectedIndex”来执行此操作，将选项卡索引值设置为 selectedindex 然后它将激活该选项卡，我们可以在<md-tab-group> 中使用 selectedIndex 它将从零开始。更多详情请查看tabs

【讨论】：