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 个答案: