角材料固定側-NAV

の下、私はテキストとするとき、ツールバー上のメニューボタンをクリックを非表示にするように私は、サイドナビゲーションバーを作ってきました。ここでは、この

のように、私の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(); 
    } 
} 
}

ファイルである私の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>

ですが、私はそれを見つけることができません。これをAngularで行うことは可能ですか？そうではありませんか？

ありがとうございました。

出典

2016-09-19 Udara

AMのsideNavがあることを行うように設定されていないが、CSSのクラスと条件付きトグルを使用して自分自身を構築することは困難ではないであろう。 – isherwood

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

角材料固定側-NAV

答えて

関連する問題