我想循环遍历一系列菜单和子菜单(可能是子菜单的子目录)。
我使用metronic模板(查看此链接的倒数第二项Metronic Template("多级菜单")
我有这个结构:
$scope.dashitems = [{
title: 'Company',
icon: 'icon-layers',
href: '#/dashboard1',
isActive: path === '/dashboard1'
}, {
title: 'Buildings',
icon: 'icon-layers',
href: '#/Buildings',
isActive: path === '/Buildings'
}, {
title: 'Floors',
icon: 'icon-layers',
href: '#/Floors',
isActive: path === '/Floors'
}, {
title: 'Spaces',
icon: 'icon-layers',
href: 'javascript:;',
isActive: path === '/Spaces',
subitems: [{
title: 'OpenSpaces',
icon: 'icon-layers',
href: '#/OpenSpaces',
isActive: path === '/OpenSpaces',
subitems: [{
title: 'OpenSpaces2',
icon: 'icon-layers',
href: '#/OpenSpaces2',
isActive: path === '/OpenSpaces2',
}]
}, ]
}, {
title: 'Meeting',
icon: 'icon-layers',
href: '#/meeting',
isActive: path === '/meeting'
}];
这不起作用:
function printList(dashitems){
$scope.menu = '<ul>';
angular.forEach(dashitems, function(value, key) {
$scope.menu+="<li>";
if(value.hasOwnProperty('subitems')){
$scope.menu=' <a ng-href="{{ value.href }}" class="nav-link nav-toggle">'+
'<i ng-class="value.icon"></i>'+
'<span class="title">{{ value.title }}</span>'+
'<span class="arrow open"></span>'+
'</a>';
printList(value.subitems);
}else{
$scope.menu+="<a href='javascript:;' class='nav-link nav-toggle'>"+
"<i class='value.icon'></i>"+
"<span class='title'>{{value.title}}</span>"+
"</a></li>";
}
});
$scope.menu += "<ul>";
return $scope.menu;
}
如何遍历此结构并生成&#34;多级菜单&#34;的相同html; ?
编辑:
angular
.module('app').directive('menuBar', function() {
return {
restrict: 'E',
controller: ['$scope', '$location', function($scope, $location) {
//function & dashitems
$scope.printList($scope.dashitems);
}]
}
});
答案 0 :(得分:1)
您可以创建一个递归制作列表的指令。
<menu ng-model="dashItems"></menu>
该指令应该做一些事情,如:
hasOwnProperty('subItem')
项,则递归致电printList(dashItems.subitem)
。现在你只需做:element.append(printList(dashItems))
这是一种高级方法,但我认为它可能很有用。
编辑:我将帮你创建这个功能:
function printList(dashitems){
$scope.menu = '<ul>';
angular.forEach(dashitems, function(value, key) {
$scope.menu+="<li>";
if(value.hasOwnProperty('subitems')){
$scope.menu=' <a ng-href="{{ value.href }}" class="nav-link nav-toggle">'+
'<i ng-class="value.icon"></i>'+
'<span class="title">{{ value.title }}</span>'+
'<span class="arrow open"></span>'+
'</a>';
printList(value.subitems);
}else{
$scope.menu+="<a href='javascript:;' class='nav-link nav-toggle'>"+
"<i class='value.icon'></i>"+
"<span class='title'>{{value.title}}</span>"+
"</a>";
}
$scope.menu+="</li>";
});
$scope.menu += "<ul>";
return $scope.menu;
}
我认为可行的
angular
.module('app').directive('menuBar', function() {
return {
restrict: 'E',
scope: {
list: '=dashitems'
}
controller: ['$scope', '$location', function($scope, $location) {
//function & dashitems
$scope.printList($scope.dashitems);
}]
}
});
答案 1 :(得分:0)
查看源代码..他们使用Bootstrap组合一个多级菜单。结账Bootstrap's page可能是最好的。他们使用课程来安排和设置菜单。你可以通过Bootstrap来实现,或者在AngularUI项目中有一个纯粹的AngularJS Bootstrap选项。
您将要使用指令迭代您的集合,如studnumber
或其他东西。您也可以像其他答案一样编写自定义指令。我发现这一切都取决于偏好。我使用ng-repeat
并将重复嵌套在一起以创建多级项目。