Leftside multilevel menu with Ionic, angularjs, bootstrap 3 didnt work properly

Question

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 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

enter image description here

when i click nothing happends

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

Can you copy the link, exactly the way it's rendered in your menu ? Perhaps it needs a hash "#" within the URL to make it work. — bob.mazzo, Jul 18 '14 at 03:51

score 8 · Answer 1 · edited May 23 '17 at 12:33

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?

didnt help, the problem is that when i click the menu didnt collapse or expand, nothing happends... but nice try — andrescabana86, Jul 22 '14 at 07:33

score 2 · Answer 2 · edited May 23 '17 at 12:25

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);
            }
        }
    };
}]);

http://plnkr.co/edit/R5RW3W

score 1 · Answer 3 · answered Jul 27 '14 at 17:19

1

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.

answered Jul 27 '14 at 17:19

Zentoaku

766
4
12

Leftside multilevel menu with Ionic, angularjs, bootstrap 3 didnt work properly

3 Answers3