How to build a nested tree in AngularJS with recursive inclusion [duplicate]

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: stackoverflow.com/questions/15661289/…. The fiddle in the approved answer was enough for me to get it working. — Karen Zilles
– Karen Zilles, Commented Jun 3, 2013 at 20:05

Karen Zilles · Accepted Answer · 2013-06-03 20:44:05Z

2

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.

answered Jun 3, 2013 at 20:44

Karen Zilles

7,6713 gold badges37 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to build a nested tree in AngularJS with recursive inclusion [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related