Geek Answers Handbook

Left tiered menu with Ionic, angularjs, bootstrap 3 not working properly

I need this enter image description here

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 tried to do two weeks. please can anyone help me?

as much as possible.

 <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 is an example that i use to understand

and this is the result

enter image description here

when i click nothing happens

Console: syntax error, unrecognized expression: index / titleone.html

+8
javascript angularjs twitter-bootstrap-3 ionic-framework
source share
3 answers

Your menu is just a bunch of nested lists; after viewing this post , I was able to take your subMenu data structure and adapt it to create 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 violin if you want to see it in action.

Does it help?

+8
source share

Here's an example of frankensteined Bootstrap 3 non-contact 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 could do it: Quoting 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); } } }; }]);

http://plnkr.co/edit/R5RW3W

+2
source share

In general, what you are trying to do is a tree. Check the source code: http://ngmodules.org/modules/angular.treeview and / or look at other examples of these programs and adapt them to your needs.

+1
source share

More articles:


All Articles