Question

我使用<md-tab>创建了带有水平标签的AMD页面，我希望它是移动菜单，当我将浏览器大小更改为小尺寸然后调整为正常，反之亦然，如引导程序移动菜单。这可能吗？？提前谢谢你。

我创建了主页面如下： Index.html

    <!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="angular-material/angular-material.css">
    <style >
 .mainApp md-content .ext-content {
  padding: 50px;
  margin: 20px;
  background-color: #FFF2E0; }
  </style>
</head>
<div id="logo" > <a href="favicon.ico"></div>
<body ng-app="mainApp">
    <div ng-controller="AppCtrl" layout="column" ng-cloak>

    <script type="text/ng-template" id="views/home.html" ></script>
  <script type="text/ng-template" id="views/aboutus.html"></script>
  <script type="text/ng-template" id="views/services.html"></script>
  <script type="text/ng-template" id="views/contactus.html"></script>

   <md-tabs md-stretch-tabs="always" class="md-primary" md-selected="selectedIndex">

    <md-tab data-ui-sref="home" md-active="state.is('home') ">
    <md-tab-label>HOME</md-tab-label>
    </md-tab>

    <md-tab data-ui-sref="aboutus" md-active="state.is('aboutus')">
    <md-tab-label>ABOUT US</md-tab-label>
    </md-tab>

    <md-tab data-ui-sref="services" md-active="state.is('services')">
    <md-tab-label>SERVICES</md-tab-label>
    </md-tab>

    <md-tab data-ui-sref="contactus" md-active="state.is('contactus')">
    <md-tab-label>CONTACT US</md-tab-label>
    </md-tab>
<!--     <md-tab id="tab1" label="HOME" aria-controls="tab1-content" md-nav-click="goto('home')"></md-tab>
    <md-tab id="tab2" label="ABOUT US" aria-controls="tab2-content" md-nav-click="goto('aboutus)"></md-tab>
    <md-tab id="tab3" label="SERVICES" aria-controls="tab3-content" md-nav-click="goto('services')"></md-tab>
    <md-tab id="tab4" label="CONTACT US" aria-controls="tab4-content" md-nav-click="goto('contactus')"></md-tab>
 -->  </md-tabs> 

  <div id="content" ui-view flex> </div>

    </div>

    <script src="angular/angular.js"></script> 
    <script src="angular-material/angular-material.js"></script> 
    <script src="angular-aria/angular-aria.js"></script> 
    <script src="angular-animate/angular-animate.js"></script> 
    <script src="angular/angular-ui-router.min.js"></script>
    <script src="controller/controller.js"></script> 

</body>
</html>

controller.js

(function(angular, undefined) {
    "use strict";
    angular.module('mainApp', ['ngMaterial',  'ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/home');
        $stateProvider
        .state('home', {
            url: "/home",
            templateUrl: "views/home.html"
        })
        .state('aboutus', {
            url: "/aboutus",
            templateUrl: "views/aboutus.html"
        })
        .state('services', {
            url: "/services",
            templateUrl: "views/services.html"
        })
        .state('contactus', {
            url: "/contactus",
            templateUrl: "views/contactus.html"
        })
        ;
    })
    .controller('AppCtrl', function($scope,$state, $location, $log) {
        $scope.selectedIndex = 0;
        $scope.$watch('selectedIndex', function(current, old) {
            switch (current) {
                case 0:
                    $location.url("/home");
                    break;
                case 1:
                    $location.url("/aboutus");
                    break;
                case 2:
                    $location.url("/services");
                    break;
                case 3:
                    $location.url("/contactus");
                    break;
            }
        });
    });

})(angular);

Answer 1

以下是根据屏幕尺寸显示和隐藏元素的示例 - CodePen

在您的代码中，您可以将md-menu与md-menu-bar或<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" layout-align="center center"> <div style="width:200px; height:100px; background:red" ng-if="!mobile"></div> <div style="width:100px; height:200px; background:blue" ng-if="mobile"></div> </div>交换。

查看docs以获取有关$ mdMedia的更多信息。

标记

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope, $window, $mdMedia) {
  resizeProgress();

  angular.element($window).bind("resize", function() {
    resizeProgress();
    $scope.$apply();
    });

  function resizeProgress () {
    if ($mdMedia("gt-xs")) {
      $scope.mobile = false;
    }
    else if ($mdMedia("xs")) {
      $scope.mobile = true;
    }
  }
});

JS

<md-menu-item><md-button ng-click="showPage(0)">Home</md-button></md-menu-item>
<md-menu-item><md-button ng-click="showPage(1)">About Us</md-button></md-menu-item>
....

要使菜单起作用，你可以做一些简单的事情：

标记

$scope.showPage = function (page) {
   $scope.selectedIndex = page;
};

JS

foreach (GridViewRow Row in this.searchResults.SearchResultGrid.Rows)
                    {
                        if (Row.RowType == DataControlRowType.DataRow)
                        {
                            Row.Cells[0].Visible = false;
                        }
                    }
                    GridViewRow HeaderRow = this.searchResults.SearchResultGrid.HeaderRow;
                    HeaderRow.Cells[0].Visible = false;

但是，如果您打算这样做，我建议您将名称 selectedIndex 更改为 selectedLocation 。

当浏览器窗口大小改变时，角度材料设计水平导航标签转换为移动菜单

1 个答案: