如何使用angularjs和特定数据结构创建简单的树可扩展/可折叠视图

由于您需要一个级别,所以可以使用html表和2个ng重复,1个用于任务,另一个用于子任务。您还可以添加按钮来显示/隐藏子项。

<table class="table table-hover">
    <thead>
        <tr>
            <td><b>ID</b></td>
            <td><b>Task</b></td>
            <td></td>
        </tr>
    </thead>
    <tbody ng-repeat="task in ListOfTasks" ng-init="task.showChildren = false">
        <tr>
            <td>
                <span class="label label-success">{{$index+1}}</span>
                <span>
                    <a class="label label-danger" ng-show="!post.showChildren" ng-click="task.showChildren = true">+</a>
                    <a class="label label-primary" ng-show="post.showChildren" ng-click="task.showChildren = false">-</a>
                </span>
            </td>
            <td>
                {{task.TASK_NAME}}
            </td>
            <td class="table-actions"></td>
        </tr>
        <tr ng-show="task.showChildren">
            <td>
                <div class="row">
                    <div class="col-sm-offset-1">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <td>ID</td>
                                    <td><b>Child Task</b></td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="childTasks in task.CHILD_TASKS">
                                    <td class="col-sm-1">
                                        <span class="label label-success">{{ $index + 1 }}</span>
                                    </td>
                                    <td>
                                       {{childTasks.CHILD_TASK_NAME}}
                                    </td>
                                    <td class="table-actions"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

这张桌子看起来像

此外,如果您不习惯在开始时获取所有数据,您可以在展开单击时获取子级