问题描述
限时送ChatGPT账号..我有一个关于 Material Design md-tabs 控件的问题.我在其中一个页面上使用带有 Angularjs 的 md-tabs,它工作正常.我在该页面上还有一个 md 按钮,我们想要做的是,当用户单击该按钮时,我们希望移至下一个选项卡.我对这整个物质角度的事物不熟悉,如果有人能指导我朝着正确的方向前进,我将不胜感激.
解决方案您可以在 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() {如果($scope.selectedTab === 2){$scope.selectedTab = 0;}别的 {$scope.selectedTab++;}}}]);
.tab-content {边距:20px 0 0 0;文字对齐:居中;}.tab 容器 {高度:120px;}.tab-change-row {文字对齐:居中;}.tab-change-btn {显示:内联块}
<link href="https://ajax.googleapis/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="样式表"/><script src="https://ajax.googleapis/ajax/libs/angularjs/1.3.15/angular.min.js"></script><script src="https://ajax.googleapis/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script><script src="https://ajax.googleapis/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script><script src="https://ajax.googleapis/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script><body ng-app="材料"><div ng-controller="tabCtrl"><div class="tab-container"><md-tabs md-selected="selectedTab"><md-tab label="一个"><p class="tab-content">标签一内容</p></md-tab><md-tab label="两个"><p class="tab-content">Tab 二内容</p></md-tab><md-tab label="三"><p class="tab-content">Tab 三内容</p></md-tab></md-tabs><div class="tab-change-row"><md-button class="tab-btn md-raised" ng-click="changeTab()">更改选项卡</md-button>
发布评论