Pung Worathiti Manosroi Pung Worathiti Manosroi - 11 months ago 104
jQuery Question

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

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>

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



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.

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

Thank you :)

Answer Source

Add ng-if here

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

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;

EDIT:// Now changing the folder (opened or closed) http://jsfiddle.net/8f3rL/35/