Recursive Menu in AngularJS

Question

I am totally new to AngularJS. I want to build a ListView kind of menu with multiple levels. Most of the examples that I have found online are to develop Tree Structure. What I want is to display one level at a time. I have picked up an existing example as given below (see this JSFiddle):

Here is my HTML:

<div ng-app="app" ng-controller='AppCtrl'>
    <script type="text/ng-template" id="categoryTree">
        {{ category.title }}
        <ul ng-if="category.categories">
            <li ng-repeat="category in category.categories" ng-include="'categoryTree'" ng-click="DisplayNextLevel($index)">           
            </li>
        </ul>
    </script>
    <ul>
        <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
    </ul>    
</div>

And this is my JS:

var app = angular.module('app', []);

app.controller('AppCtrl', function ($scope) {

    // Do something to display next Menu Level
    $scope.DisplayNextLevel = function(Index) {
        $window.alert('Alert!');
        $window.alert(Index);
    };


$scope.categories = [
  { 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },

      {
        title: 'Desktops'
      },

      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },

  {
    title: 'Printers'
  }

];

});

I want the program to display only the first level items on start up, i.e.:

o Computers
o Printers

When the user clicks on Computers, it should display next level of Computers, while removing the first level, i.e:

Laptops
Desktops
Tablets

and so on....

How can I modify DisplayNextLevel(), or any other method, to achieve this objective?

CodingNinja · Accepted Answer · 2015-02-07 14:45:49Z

1

You have to have separate variables - currentLevel and parentLevl

http://plnkr.co/edit/rNbEMoC3OrG7YMbl9aFW?p=preview

$scope.displayNextLevel = function(i) {
  $scope.parentLevel = $scope.currentLevel[i];
  $scope.currentLevel = $scope.currentLevel[i].categories;
}

answered Feb 7, 2015 at 14:45

CodingNinja

8019 silver badges17 bronze badges

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

5 Comments

AnR Over a year ago

Thanks for the quick response. This is excellent. Drill down is working perfectly. Now what do I need to do to go back one level up in the hierarchy? I mean going from one of the lower levels to the previous/upper level.

CodingNinja Over a year ago

you can implement it by saving all the indices that are clicked and retracing the path

AnR Over a year ago

I am accepting your answer as the right answer. However, I would appreciate your additional help in completing this additional task, i.e. the Reverse Drill down. Are you saying that I need to save unlimited number of indices, if the number of levels are not known? Can you modify your code please to show this? Many thanks.

AnR Over a year ago

Fantastic. With my limited knowledge I would not have been able to do this myself. Many thanks :-) Can you please guide me to a quick and easy to understand resource where I could learn AngularJS quickly and easily. Thanks!

CodingNinja Over a year ago

there are many sites to learn angular from. you can follow my blog though i don't update it regularly, ngexample.com

Collectives™ on Stack Overflow

Recursive Menu in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related