Angular JS with multiple menu levels

Question

Angular JS with multiple menu levels

I am looking to iterate through an array of menus and submenus, possibly with nested submenus.

Currently, I am using the Metronic template for my project. You can see a sample of the menu structure in the second-last item on this Metronic Template ("Multi Level Menu").

Here is the structure I am working with:

$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 code snippet does not achieve the desired outcome:

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

Can someone provide guidance on how to successfully loop over this structure and generate HTML like 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);
      }]
    }   
});

javascript angularjs metronic

Answer 1

Answer №1

If you want to create a custom directive that generates recursive lists, here is a high-level overview of how you can do it:

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

The directive should perform the following steps:

Create a function called printList(dashItems)
Open a ul element
Iterate through dashItems and generate a li element for each item
If an item has property 'subItem', call printList(dashItems.subitem) recursively
Finally, close the ul element and return the list

To implement this, simply use:

element.append(printList(dashItems))

Here is a suggested implementation for the printList function:

function printList(dashitems){
            $scope.menu = '<ul>';
            angular.forEach(dashitems, function(value, key) {
                $scope.menu+="<li>";
                if(value.hasOwnProperty('subitems')){

                  // Handle subitems logic
                  
                  printList(value.subitems);
                }else{
                   // Handle regular items logic
                }
                $scope.menu+="</li>";
            });
            $scope.menu += "<ul>";
            return $scope.menu;
        }

This approach should work well in creating recursive lists using a custom directive.

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

Answer 2

If you want to create a custom directive that generates recursive lists, here is a high-level overview of how you can do it:

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

The directive should perform the following steps:

Create a function called printList(dashItems)
Open a ul element
Iterate through dashItems and generate a li element for each item
If an item has property 'subItem', call printList(dashItems.subitem) recursively
Finally, close the ul element and return the list

To implement this, simply use:

element.append(printList(dashItems))

Here is a suggested implementation for the printList function:

function printList(dashitems){
            $scope.menu = '<ul>';
            angular.forEach(dashitems, function(value, key) {
                $scope.menu+="<li>";
                if(value.hasOwnProperty('subitems')){

                  // Handle subitems logic
                  
                  printList(value.subitems);
                }else{
                   // Handle regular items logic
                }
                $scope.menu+="</li>";
            });
            $scope.menu += "<ul>";
            return $scope.menu;
        }

This approach should work well in creating recursive lists using a custom directive.

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

Answer 3

Answer №2

Take a look at the code structure... They have utilized Bootstrap to construct a complex menu with multiple levels. To gain a better understanding, visit Bootstrap's official page. Bootstrap utilizes classes for organizing and setting up menus. You also have the option of using AngularJS Bootstrap which is available in the AngularUI project.

To handle your collection effectively, it is recommended to use a directive such as ng-repeat. Alternatively, you can create a custom directive as suggested in another answer. Ultimately, the choice comes down to personal preference. I personally utilize ng-repeat and nest iterations together to form multi-level items.

Answer 4

Take a look at the code structure... They have utilized Bootstrap to construct a complex menu with multiple levels. To gain a better understanding, visit Bootstrap's official page. Bootstrap utilizes classes for organizing and setting up menus. You also have the option of using AngularJS Bootstrap which is available in the AngularUI project.

To handle your collection effectively, it is recommended to use a directive such as ng-repeat. Alternatively, you can create a custom directive as suggested in another answer. Ultimately, the choice comes down to personal preference. I personally utilize ng-repeat and nest iterations together to form multi-level items.

Angular JS with multiple menu levels

Answer №1

Answer №2

Similar questions

What is the best way to create a new object in a Vue component with optimal efficiency?

Why is it that I am unable to properly encode this URL in node.js?

jQuery causing trouble with AJAX in Rails

Clicking on Only One Card in Material UI React

Changing the extension from html to php causes unexpected behavior in Javascript

Checking URL validity with regular expressions in Vue JS

The Dockerized AngularJS app is not displaying correctly in the web browser

The value of the innermost dropdown in the AngularJS Cascading dropdown is not being retrieved when it is selected

Is it possible to generate a specified number of divs or HTML tags with varying information using ReactJS?

Retrieve a particular path element by its assigned ID

Changing the appearance of a website by applying various stylesheets based on the size of the browser window in

Trouble with sending data from jQuery Ajax to Node.js server

Sending a json array from PHP

Dealing with problems in col-md display on tablet devices

Upgrade your AJAX logic from synchronous to asynchronous for improved performance

Cycle through the list and populate the table with the data

Trouble with retrieving data from localStorage

JavaScript vs. GSP: Exploring How to Trigger a Grails Action

Encounter an issue during npm installation of electron: "Error verifying the initial certificate."

Is there a way to retrieve the width of the parent element in ReactJS from a child component?