AngularJS Web Application Development Cookbook

Recursive directives

The power of directives can also be effectively applied when consuming data in a more unwieldy format. Consider the case in which you have a JavaScript object that exists in some sort of recursive tree structure. The view that you will generate for this object will also reflect its recursive nature and will have nested HTML elements that match the underlying data structure.

Getting ready

Suppose you had a recursive data object in your controller as follows:

(app.js) angular.module('myApp', []) .controller('MainCtrl', function($scope) { $scope.data = { text: 'Primates', items: [ { text: 'Anthropoidea', items: [ { text: 'New World Anthropoids' }, { text: 'Old World Anthropoids', items: [ { text: 'Apes', items: [ { text: 'Lesser ...