角材料固定侧导航

我想隐藏的文本，当点击菜单按钮在工具栏上侧面导航栏。像这样

这里是我的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做到这一点？

任何帮助非常感谢。

来源

2016-09-19 Udara

AM的sideNav没有设置要做到这一点，但它不会是很难用CSS类和条件拨动自己构建。 – isherwood

像@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>

希望它可以帮助=）

来源

2016-09-19 17:05:13

你可以添加其他代码吗？ – Udara

其他代码是什么意思？我做的这个项目非常复杂，你应该得到这个想法并适用于你的...我不能为你做。 –

我的意思是css类。好的没问题，我会试试。谢谢你的帮助。 – Udara

角材料固定侧导航

回答

相关问题