Leftside multilevel menu with Ionic, angularjs, bootstrap 3 didnt work properly
Question
i need this
this is the controller code:
$scope.sideNavMenu =
{
title: "User Manual",
subMenu: [
{
title: "Title one",
link: "index/titleone.html",
icon:"fa fa-caret-down",
subMenu: []
},
{
title: "Basic",
link: "index/basic/basic.html",
icon:"fa fa-caret-down",
subMenu: [
{
title: "Basic Function",
link: "index/basic/function.html",
icon:"fa fa-caret-down",
subMenu: []
}]
}]
};
i have been two weeks trying to solve. please any can help me?
this is as far as it went
<div id="MainMenu">
<div class="list-group panel">
<a href="#mainMenuContainer" class="list-group-item list-group-item-success strong" data-toggle="collapse" data-parent="#MainMenu">
<i class="fa fa-home"></i>
{{sideNavMenu.title}}
<i class="fa fa-caret-down"></i>
</a>
<div ng-include ng-if="sideNavMenu.subMenu.length > 0" ng-repeat="navMenu in sideNavMenu.subMenu" onload="data = navMenu" src="'menuTemplate.html'"class="collapse" id="mainMenuContainer">
</div>
</div>
template
<script id="menuTemplate.html" type="text/ng-template">
<a ng-href="#{{ (data.subMenu.length > 0) && data.link || ''}}" class="list-group-item {{(data.subMenu.length > 0) && 'strong' || ''}}" data-toggle="collapse" data-parent="{{data.link}}">{{data.title}}<i class="fa fa-caret-down"></i></a>
<div ng-include ng-repeat="navMenu in data.subMenu" onload="data = navMenu" src="'menuTemplate.html'" class="list-group-submenu" ng-if="data.subMenu.length > 0" ng-attr-id="{{data.link}}">
</div>
</script>
here an example that i use to understand
and this is the result
when i click nothing happends
Console: Syntax error, unrecognized expression: index/titleone.html
3 answers
solution1
8 2014-07-22 02:29:24
Your menu is basically just a bunch of nested lists; after looking at this post , I was able to take your subMenu data structure and adapt it to generate a simple list:
HTML
<div ng-app>
<script type="text/ng-template" id="menu-renderer">
{{item.title}}
<ul ng-if="item.subMenu && item.subMenu.length > 0">
<li ng-repeat="item in item.subMenu" ng-include="'menu-renderer'"></li>
</ul>
</script>
<div ng-controller="MenuCtrl">
<ul>
<li ng-repeat="item in subMenu" ng-include="'menu-renderer'"></li>
</ul>
</div>
</div>
Javascript
function MenuCtrl($scope) {
$scope.subMenu = [
{
title: "User Manual",
subMenu: [
{
title: "Title one",
link: "index/titleone.html",
icon:"fa fa-caret-down",
subMenu: []
},
{
title: "Basic",
link: "index/basic/basic.html",
icon:"fa fa-caret-down",
subMenu: [
{
title: "Basic Function",
link: "index/basic/function.html",
icon:"fa fa-caret-down",
subMenu: []
}]
}]
}];
}
I have this fiddle if you'd like to see it in action.
Does that help?
solution2
2 2014-07-23 22:08:14
Here is a frankensteined example of infinite level Bootstrap 3 accordions working with Angular and Angular-UI Bootstrap. This code can (and should) certainly be improved as noted in this post, but shows that they can work together and how you might go about doing that: Looping through deep objects in ng-repeat
index.html
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src="example.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Home" is-open="getOpenedStatus" ng-init="setOpenedStatus(false);">
<accordion-heading>
<a class="accordion-toggle">
<i class="fa fa-home"></i>
Home
</a>
</accordion-heading>
<accordion close-others="oneAtATime">
<accordion-group ng-repeat="group in group.groups" is-open="getOpenedStatus" ng-init="setOpenedStatus(true);">
<accordion-heading>
<a class="accordion-toggle">
{{group.title}}
</a>
</accordion-heading>
{{group.content}}
<div nested-item>
</div>
</accordion-group>
</accordion>
</accordion-group>
</accordion>
</div>
</body>
</html>
example.js
var app = angular.module('plunker', ['ui.bootstrap']);
var groups = {
groups:[
{ title: "Dynamic Title 1", content: "Dynamic content 1" },
{ title: "Dynamic Title 2", content: "Dynamic content 2", groups: [
{title: "Subnav Title 1", content:'Subnav content 1'},
{title: "Subnav Title 2", content:'Subnav content 2', groups:[
{title: "Sub-subnav Title1", content: 'subsubnav content 1'}
]}
]}
]};
function AccordionDemoCtrl($scope) {
$scope.isMenuOpenedInitially = false;
$scope.staticTitle = "Static Title";
$scope.group = groups;
$scope.setOpened = function(isOpened) {
$scope.opened = isOpened;
};
$scope.getOpenedStatus = function() {
return $scope.opened;
};
$scope.toggleRoot = function(){
return isMenuOpenedInitially;
};
}
app.directive('nestedItem', ['$compile', function($compile){
return {
restrict: 'A',
link: function(scope, element){
// alert(scope.group.groups);
if (scope.group.groups){
// var html=$compile('<h1>test</h1>')(scope);
// var html = $compile('<ul><li nested-item ng-repeat="group in group.groups">{{group.title}}</li></ul>')(scope);
var html=$compile(''+
'<accordion close-others="oneAtATime">' +
'<accordion-group ng-repeat="group in group.groups" is-open="opened" ng-init="setOpened(true);">'+
'<accordion-heading>' +
'<a class="accordion-toggle" ng-click={{opened}}>'+
'{{group.title}}'+
'</a>'+
'</accordion-heading>'+
'{{group.content}}'+
'<div nested-item>'+
'</div>'+
'</accordion-group>'+
'</accordion>'
)(scope);
element.append(html);
}
}
};
}]);
solution3
1 2014-07-27 17:19:41
In general what you're trying to do is a tree view. Check the source code of: http://ngmodules.org/modules/angular.treeview and/or look for other example implementation of those and adapt them to your needs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.