Multi-menu level Angular js

Question

I want to loop over an array of menus and submenus(maybe sub of submenus) .

I use metronic template (look the second-last item of this link Metronic Template ("Multi Level Menu")

I have this structure :

$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'
}];

this not work :

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

How to loop over this structure and produce the same html of the "Multi Level Menu" ?

EDIT:

angular
  .module('app').directive('menuBar', function() {
    return {
      restrict: 'E',
      controller: ['$scope', '$location', function($scope, $location) {
        //function & dashitems
            $scope.printList($scope.dashitems);
      }]
    }   
});

Serginho · Accepted Answer · 2016-01-22 11:44:57Z

1

You can create a directive that make lists recursively.

<menu ng-model="dashItems"></menu>

The directive should do somethink like:

create a funcion printList(dashItems)
open a ul element
Iterate dashItems, for each item generates a li element
If an item hasOwnProperty('subItem'), you call printList(dashItems.subitem) recursively.
Finally close the ul element and return list.

Now you only have to do: element.append(printList(dashItems))

That's a high level approach but I think it could be usefull.

Edited: I'm going to help you to create the function:

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

I think that could work

angular
  .module('app').directive('menuBar', function() {
    return {
      restrict: 'E',
      scope: {
          list: '=dashitems'
      }
      controller: ['$scope', '$location', function($scope, $location) {
        //function & dashitems
            $scope.printList($scope.dashitems);
      }]
    }   
});

edited Jan 22, 2016 at 11:44

answered Jan 21, 2016 at 16:24

Serginho

7,5303 gold badges31 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Fr4ncx Over a year ago

i will create the directive but first i want to display the correct menu with ng-repeat, look the question!

Serginho Over a year ago

You can't use ng-repeat, it's not recursively

Fr4ncx Over a year ago

look the question, I tried to create the print function List! Any suggestion?

Fr4ncx Over a year ago

and how i can associate that function into a directive? thank you

Serginho Over a year ago

scope.printList = function (dashitems) {... } Noticed that's the directive scope

|

Branco · Accepted Answer · 2016-01-21 16:26:18Z

0

Look at the source code.. They use Bootstrap to put together a multi-level menu. You'd probably be best served checking out Bootstrap's page. They use classes to arrange and set up a menu. You can do it through Bootstrap or there is a pure AngularJS Bootstrap option in the AngularUI project.

You're going to want to use a directive to iterate through your collection like ng-repeat or something. You can write a custom directive like the other answer suggests, too. I find it all comes down to a matter of preference. I use ng-repeat and nest repeats together to create multi-level items.

answered Jan 21, 2016 at 16:26

Branco

2013 silver badges19 bronze badges

Collectives™ on Stack Overflow

Multi-menu level Angular js

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related