use*_*611 3 angularjs material-design angular-material
我有一个关于材料设计md-tabs控件的问题.我在其中一个页面上使用Angularjs的md-tabs,它工作正常.我在该页面上也有一个md按钮,我们想要做的是,当用户点击该按钮时我们想要移动到下一个标签.我对这整个物质角度的东西都是新手,如果有人能指引我正确的方向,我会很感激.
您可以md-selected在md-tabs指令上使用该属性.md-tabs使用md-selected属性来决定选择哪个选项卡.因此,只需$scope.selectedTab单击您的更新md-button即可选择所需的选项卡.
看看这段代码:
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>| 归档时间： |
|
| 查看次数： |
9471 次 |
| 最近记录： |