How to handle recursive rendering of data using AngularJS

Question

I have an application that has set of data that has a recursive relationship (a tree view, using recursion.) I've tried several ways to implement this via Angular, none of which seem to render a viable result.

The idea here is that I wish to have this data rendered using a set of nested lists, allowing for numerous (7+) levels of depth. To simplify things (my actual application uses Restangular) I've built the following plunker:

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

While the "top" level data renders correctly (just the first title) my attempt to recurse using nested controllers seems to fail miserably. The idea here is that each "child" in the tree is rendered using it's own controller, which can then render it's children, and so-on and so-forth. I realize that nested controllers might not be the "best" way to go, but after much searching I haven't found a "better" alternative.

It's important that the resulting solution preserves the concept of "nesting" here (each element appearing below its parent element, with a slight indent.)

Answer 1

rather than nest your controllers, nest the data and just have the one controller.

the view is handled by a template that references itself recursively.

as chadermani has linked to, there are some answers out there.

here is a fiddle with a great example (not my code)

http://jsfiddle.net/brendanowen/uXbn6/8/

and the code from the fiddle

<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});
    };
    $scope.tree = [{name: "Node", nodes: []}];
}]);

Answer 2

If you are familiarized with batarang tool, it has a treeview of scopes. You can see the source here:

https://github.com/angular/angularjs-batarang/blob/master/js/directives/scopeTree.js

The idea is simple. Using $compile to recursively render that directive for every children it finds until there is no more children to render.

I saw that same idea for other alternatives, take a look here:

Is it possible to make a Tree View with Angular?

Answer 3

Try this for a nice clean example

http://codrspace.com/build80/create-recursive-tree-structure-using-template-in-angularjs/