在材料设计的侧边栏中添加下拉菜单?

问题描述:

我想点击民意调查时,打开下拉菜单,其中包括拉类的子类别。在材料设计的侧边栏中添加下拉菜单?

enter image description here

我应该如何改变我的代码,以便与材料设计添加此功能。

在状态提供者:

$stateProvider 
     .state('admin', { 
     /*abstract: true,*/ 
     url: '/admin', 
     templateUrl: 'app/admin/admin.html', 
     controller: 'AdminCtrl', 
     onEnter: function($rootScope) { 
     $rootScope.title = $rootScope.titleRoot + ' | Admin'; 
     } 
     }); 
    }); 

,并以html

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')"> 
    <md-toolbar class="md-theme-indigo"> 
     <h1 class="md-toolbar-tools">Admin</h1> 
    </md-toolbar> 
    <md-content class="" ng-controller="LeftCtrl"> 
     <md-button ng-click="close()" class="md-primary" hide-gt-md> 
     Close Sidenav Left 
     </md-button> 
     <!--<p hide-md show-gt-md>--> 
     <!--</p>--> 
     <ul class="sidenav-menu"> 
     <li class="" ng-repeat="section in sections"> 

      <md-button ui-sref="{{section.link}}"> 
      <i class="fa fa-fw {{section.icon}}"></i> {{section.title}} 
      </md-button> 

     </li> 
     </ul> 
    </md-content> 
    </md-sidenav> 

内部控制器:

.controller('AdminCtrl', function($scope, $mdSidenav, $timeout, $log) { 
    $scope.sections = [ 
     { 
     title: 'User Management', 
     icon: 'fa-user', 
     link: 'usermanagement' 
     },{ 
     title: 'Polls', 
     icon: 'fa-files-o', 
     link: 'polls' 
     }  
    ];  
    $scope.toggleLeft = function() { 
     $mdSidenav('left').toggle() 
     .then(function() { 
      //$log.debug("toggle left is done"); 
     }); 
    }; 
    }) 
    .controller('LeftCtrl', function($scope, $timeout, $mdSidenav, $log) { 
    $scope.close = function() { 
     $mdSidenav('left').close() 
     .then(function(){ 
      //$log.debug("close LEFT is done"); 
     }); 
    }; 
    }); 
+0

在点击投票时显示并隐藏包含md-select的div。为获得代码方面的帮助做点事情。 – nitin

由于您使用的角料,我建议你使用它的菜单指令:https://material.angularjs.org/latest/#/demo/material.components.menu