AngularJS：递归扩展树表 [英] AngularJS : Expandable recursive tree table

问题描述

我的工作角度数据树递归表。这样的想法是，为了与膨胀节点正确投掷树的数据（不知道树的部门），并呈现树为表。现在，我成功地做了树表由递归调用模板来创建表内表

I'm working on angular data tree recursive table. So the idea is, to throw tree-data (without know the dept of the tree) and render the tree as a table properly with the expandable node. Right now I'm successfully did the tree table by recursively call template to create a table inside the table

这里的code，也可以在这里的行动看出来：的jsfiddle

Here's the code or you can see it in action here : jsfiddle

<script type="text/ng-template"  id="tree_item.html">

   <tr style="width:100%">
      <td><i class="fa fa-folder-open"></i></td>
      <td>
            {{data.name}}

        <div id="expanded-data">
            <table class="table table-striped" id="nested-table">
                    <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'">     </div>
            </table>
        </div>
    </td>
</tr>

</script>


 <table class="table table-striped">
 <thead>
    <tr>
        <th style="width:30px;"><i ng-click="loadItems()" class="fa fa-refresh blueicon"></i></th>
        <th style="width:auto">Data tree</th>
    </tr>
</thead>
<tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">

</tbody>

</table>

现在我被困下一步骤，这是为了使切换扩大和放大器;当您单击文件夹图标，然后设置子节点，以显示为无崩溃。

Now I'm stuck with the next step, which is to enable toggle expand & collapse when you click to the folder icon then set child-node to display= none.

我已经尝试了一些与NG-开关，但没有成功。难道你们有什么想法如何做到这一点？

I've tried some with ng-switch but with no success. Do you guys have any Ideas how to do this ?

感谢您：）

推荐答案

添加NG-如果在这里

<div id="expanded-data" data-ng-if="childrenVisible">

和给你的树项目定义自己的孩子的可见性属性。
默认设置该属性true或false（如果你想假的只是不被默认添加）和实施toggleChildren功能是通过在切换按钮（文件夹）

and give your tree items a property which defines the visibility of their children. Set the property true or false (if you want false just dont add it by default) by default and implement a toggleChildren function which is called by a click on the toggleButton (the folder)

scope.toggleChildren = function () {
    scope.item.childrenVisible = !scope.item.childrenVisible;
}

编辑：//现在更改文件夹（打开或关闭）
http://jsfiddle.net/8f3rL/35/

这篇关于AngularJS：递归扩展树表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！