角度材料固定侧导航

Question

我做了一个像下面这样的侧导杆

我想隐藏文本，然后单击工具栏上的菜单按钮。 像这样

这是我的HTML代码

<body  ng-controller="dashCtrl" class="text-center " >


 <md-toolbar class="md-hue-2">
  <div class="md-toolbar-tools" >
      <md-button class="md-icon-button" ng-click="toggleLeft()" >
            <img src="img/icon/menu.svg" />

      </md-button>

      </div>
</md-toolbar>


<md-content flex style="height:100%"> 
<md-sidenav style="width: 200px;" md-component-id="left"  class="md-sidenav-left md-whiteframe-z1 " layout="column" md-disable-backdrop >
    <md-content>
    <md-list>

        <md-list-item md-ink-ripple >
            <i class="material-icons">apps</i><div style="margin-left:15px">Dashboard</div>

        </md-list-item >
        <hr style="width: 95%;border-bottom: 0.2px think #f2f2f2;margin-top:0px;margin-bottom:0px">

        <md-list-item md-ink-ripple>
           <i class="material-icons">domain</i><div style="margin-left:15px">Hotels</div>

            </md-list-item >
        <hr style="width: 95%;border-bottom: 0.5px think #f2f2f2;margin-top:0px;margin-bottom:0px">

    </md-list>
        </md-content>
</md-sidenav>

<md-content >
<div layout="column" flex id="content">
        <md-content layout="column" flex class="md-padding">
           <md-whiteframe class="md-whiteframe-1dp" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
<span>Dashboard</span>
</md-whiteframe>

    </div>
</md-content>
 </body>

这是我的js文件

angular
.module('dashApp',['ngMaterial'])
.controller('dashCtrl',dashApp);

function dashApp($scope,$mdSidenav){

$scope.toggleLeft = buildToggler('left');
$scope.toggleRight = buildToggler('right');

function buildToggler(componentId) {
  return function() {
    $mdSidenav(componentId).toggle();
  }
}
}

我试图在互联网上找到一个解决方案，但我找不到它。 是否可以使用Angular执行此操作？

任何帮助高度赞赏。

Answer 1

就像@isherwood说的那样，没有内置的选项可以做你想做的事情，我过去做过类似的事情，只需要简单的ng-show和ng-hide以及一些自定义类。 它不是那么难：

<md-sidenav>
   <md-content>

      <div ng-show="is_open">
          Buttons with texts....
      </div>

      <div ng-hide="is_open">
          Buttons with icons....
      </div>

   </md-content>
</md-sidenav>

希望它有帮助=）

Answer 2

这是一个较短的方法，

<md-sidenav>
 <md-content>
  Buttons
  <div *ngIf="is_open">
   texts
  </div>  
 </md-content>
</md-sidenav>

角度材料固定侧导航

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-09-19 17:05:13

解决方案2
0 2018-07-02 07:22:55

角度材料固定侧导航

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-09-19 17:05:13

解决方案2 0 2018-07-02 07:22:55

解决方案1
2 已采纳 2016-09-19 17:05:13

解决方案2
0 2018-07-02 07:22:55