材料设计MD-卡口与angularjs [英] Material design md-tabs with angularjs
问题描述
我有一个关于材料设计的MD-标签控制的问题。我上的一个页面上使用MD-卡口与Angularjs，它工作正常。我也有一个页面上的MD-按钮，我们想要做的是，当用户点击该按钮，我们要移动到下一个选项卡。我是新来这整个材料角的事情，将AP preciate如果有人能指导我在正确的方向。
您可以使用MD-标签指令中的MD-选择属性。 MD-标签使用MD-选择的属性来决定选择哪个选项卡。所以，你可以简单地在你的MD-按钮，点击更新$ scope.selectedTab选择所需选项卡。
看看这个code片断：
angular.module（材料，[ngMaterial，ngAnimate] ）\r
\r
.controller（标签ctrl，[$范围功能（$范围）{\r
$ scope.selectedTab = 0;\r
\r
$ scope.changeTab =功能（）{\r
如果（$ scope.selectedTab === 2）{\r
$ scope.selectedTab = 0;\r
}\r
其他{\r
$ scope.selectedTab ++;\r
}\r
\r
}\r
}]）; \r
.TAB内容{\r
保证金：为20px 0 0 0;\r
文本对齐：中心;\r
}\r
\r
.TAB容器{\r
高度：120像素;\r
}\r
\r
.TAB换行{\r
文本对齐：中心;\r
}\r
\r
.TAB变化，BTN {\r
显示：inline-block的\r
} \r
＆LT;链接HREF =https://ajax.googleapis.com/ajax /libs/angular_material/0.9.4/angular-material.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js\"></script>\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;脚本src=\"https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js\"></script>\r
＆LT;机身NG-应用=材料＆GT;\r
＆LT; DIV NG控制器=标签ctrl＆GT;\r
＆LT; DIV CLASS =标签容器＆GT;\r
＆LT; MD-标签MD-选择=selectedTab＆GT;\r
＆LT; MD-选项卡标签=一个＆GT;\r
＆LT; p =类选项卡内容＆GT;标签一个内容和LT; / P＆GT;\r
＆LT; / MD-标签＆gt;\r
＆LT; MD-选项卡标签=二＆GT;\r
＆LT; p =类选项卡内容＆GT;标签两个内容＆LT; / P＆GT;\r
＆LT; / MD-标签＆gt;\r
＆LT; MD-选项卡标签=三＆GT;\r
＆LT; p =类选项卡内容＆GT;标签内容三：LT; / P＆GT;\r
＆LT; / MD-标签＆gt;\r
＆LT; / MD-标签＆GT;\r
＆LT; / DIV＆GT;\r
\r
\r
＆LT; DIV CLASS =标签换行＆GT;\r
＆LT; MD-button类=标签-BTN MD-提出了NG点击=changeTab（）＆GT;更改标签＆LT; / MD-按钮＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT; \r
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.
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>
这篇关于材料设计MD-卡口与angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
