Question

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

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

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

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

使用角度1.6和自举。

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

通过其他链接，但它似乎很复杂，有更多的功能

请提出任何选择。

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

该表格看起来像

此外，如果你不想在开始时获得所有数据，你可以在扩展点击中获得孩子

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

1 个答案: