How to build a nested tree in AngularJS with recursive inclusion

Question

I'm trying to build a few in AngularJS that recursively includes itself. Each WorkflowProcess has children WorkflowProcess and I'd like the tree to be infinitely included.

Currently it looks like:

enter image description here

It should be displaying...

Approval
   |
   ---------
           |
      Impositioning

Here's my template:

<div>
    <select ng-model="workflow" ng-options="workflow.name for workflow in workflows"></select>
</div>
<div class="tree">
    <ul>
        <div ng-repeat="workflowProcess in workflow.workflowProcesses" ng-include="'/partials/admin/workflow-tree-node.htm'"></div>
    </ul>
</div>

workflow-tree-note.html

<li ng-repeat="childWorkflowProcess in workflowProcess.workflowProcesses">
    <a>{{childWorkflowProcess.entity.name}}</a>
    <ul>
        <ng-include src="'/partials/admin/workflow-tree-node.htm'" />
    </ul>
</li>

It's displaying "Impositioning" over and over. I'm recognizing that that's because the loop in the html is referencing the same data. I'm not sure how to make it just reference the next tier of data.

Every workflow has a property workflowProcesses.

Check out: http://stackoverflow.com/questions/15661289/how-can-i-make-recursive-templates-in-angularjs-when-using-nested-objects. The fiddle in the approved answer was enough for me to get it working. — Karen Zilles, Jun 03 '13 at 20:05

score 2 · Accepted Answer · answered Jun 03 '13 at 20:44

I think you just need to change

<li ng-repeat="childWorkflowProcess in workflowProcess.workflowProcesses">
<a>{{childWorkflowProcess.entity.name}}</a>

to

<li ng-repeat="workflowProcess in workflowProcess.workflowProcesses">
<a>{{workflowProcess.entity.name}}</a>

To have the variable replaced by it's child in the subtree.

How to build a nested tree in AngularJS with recursive inclusion

1 Answers1