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

【问题标题】：How to create simple tree exmpdable/collapsible view using angularjs and specific data structure如何使用 angularjs 和特定数据结构创建简单的树可扩展/可折叠视图
【发布时间】：2017-01-19 06:33:28
【问题描述】：

我需要树视图控件，它应该如下所示：

http://plnkr.co/edit/JAIyolmqPqO9KsynSiZp?p=preview

+Parent
     child
+Parent
     child
     child
     child
     child
+Parent
     child
     child
     child     
     child
     child
     child
     child

我只需要如上所示的简单树，只需要折叠-展开功能和单层。

使用 Angular 1.6 和引导程序。

我的收集数据是 - “任务列表”，每个任务都有 - “项目列表” 我如何绑定它并实现上面的树。

查看了其他链接，但看起来很复杂，功能更多

请提出任何选择。

【问题讨论】：

标签： javascript c# angularjs twitter-bootstrap treeview

【解决方案1】：

由于您需要单个级别，因此您可以将 html 表和 2 ng-repeats 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>

表格看起来像

此外，如果您不想在开始时获取所有数据，您可能会在展开点击时获得孩子

【讨论】：

感谢您提供详细信息。 - 展开后不会出现折叠。你知道吗，如何删除表格线并使其宽度更小，紧凑的树形视图。
我认为您应该为您的表格编写自定义 css
或者代替表格，您可以在 col-md-* 网格类中使用行和显示项目
谢谢。它的工作原理，我已经应用了引导列网格样式来使紧凑和应用 css 来使表格边框有所不同。