Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Recursive Menus with AngularJS Templates

DZone's Guide to

Recursive Menus with AngularJS Templates

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

AngularJS supports Templates and you can do a lot of great stuff with them. Recently I created a tree-like structure with an unknown depth. Templates are great to work with recursion.

Here is a simple controller::

function MenuCtrl ($scope, $http) {
   $scope.menuItems = [];
 
   $scope.loadMenu = function() {
      $http.get('menu/all').success(function(items) {
         $scope.menuItems = items;
      });
   };
 
   $scope.loadMenu();
}

This controller is supposed to load the whole menu at once. You can rewrite this to work with “ng-click”. I want to keep this example simple, so I just loaded the whole tree at once.

A menuItem has children property which can contain menuItems.

Now let’s create a template which calls itself:

<script type="text/ng-template" id="tree-renderer.html">
 <a href="{{menu.url}}">{{ menuItem.name }}</a>
 <ul>
   <li ng-repeat="menuItem in menuItem.children" ng-include="'tree-renderer.html'></li>
 </ul>
</script>

As you can see the ng-include directive can get a string as parameter. Please mind the extra ‘ surrounding the template id in line 4 if you pass a string. You can reference the same template from inside the template.

The initial call would look almost exactly like the template:

<ul>
  <li ng-repeat="menuItem in menuItems" ng-include="'tree-renderer.html'"></li>
</ul>

The output is a nested tree of lists.

The good thing with this approach is you benefit from two-way-data-binding. If you update your model your view is updated too. That way you can build up a very powerful menu builder like I did.

Surprisingly easy, as I found afterwards.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}