如何使用递归包含在AngularJS中构建嵌套树

Question

我正在尝试在AngularJS中构建一些递归包含自身的东西。每个WorkflowProcess都有子WorkflowProcess，我希望无限地包含这些树。

目前它看起来像：

它应该显示......

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

这是我的模板：

<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>

工作流的树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>

一遍又一遍地显示“Impositioning”。我认识到这是因为html中的循环引用了相同的数据。我不知道如何让它只是引用下一层数据。

每个工作流都有一个属性workflowProcesses。

Answer 1

我认为你只需要改变

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

到

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

让变量替换为子树中的子项。