在材料設計的側邊欄中添加下拉菜單？

Question

我想點擊民意調查時，打開下拉菜單，其中包括拉類的子類別。

我應該如何改變我的代碼，以便與材料設計添加此功能。

在狀態提供者：

$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"); 
     }); 
    }; 
    }); 

Answer 1

由於您使用的角料，我建議你使用它的菜單指令：https://material.angularjs.org/latest/#/demo/material.components.menu