polls をクリックすると、プルのサブカテゴリを含むドロップダウン メニューが開きます。
マテリアル デザインでこの機能を追加するには、コードをどのように変更する必要がありますか。
状態プロバイダー:
$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");
});
};
});