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

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

由于您使用的是Angular-Material，我建议您使用它的菜单指令：https://material.angularjs.org/latest/#/demo/material.components.menu