带有 angularjs 的材料设计 md-tabs [英] Material design md-tabs with angularjs

查看：21 发布时间：2021/11/10 1:31:56 angularjs material-design angular-material

本文介绍了带有 angularjs 的材料设计 md-tabs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个关于 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.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="样式表"/><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="材料"><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>

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>

这篇关于带有 angularjs 的材料设计 md-tabs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

带有 angularjs 的材料设计 md-tabs [英] Material design md-tabs with angularjs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

带有 angularjs 的材料设计 md-tabs [英] Material design md-tabs with angularjs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭