我有一个关于 Material 设计 md-tabs 控制的问题。我在其中一个页面上使用 md-tabs 和 Angularjs，效果很好。我在该页面上还有一个 md 按钮，我们想要做的是，当用户单击该按钮时，我们想要移动到下一个选项卡。我对整个 Material Angular 的事情很陌生，如果有人能引导我走向正确的方向，我将不胜感激。
最佳答案
您可以在 md-tabs 指令上使用 md-selected 属性。 md-tabs 使用 md-selected 属性来决定选择哪个选项卡。因此，您只需单击 md-button 即可更新 $scope.selectedTab 来选择所需的选项卡。
看一下这段代码:
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>关于angularjs - 带有 angularjs 的 Material 设计 md-tabs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31595066/