AngularJS : Expandable recursive tree table

Question

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

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

Thank you :)

Solution 1

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/

Solution 2

You can consider using tree-grid.

demo: expandable grid

  <tree-gird tree-data="tree_data"></tree-grid>

Provide a tree structured data, column definition and a property where you want to expand.

Provide a tree structured data, column definition and a property where you want to expand in your controller.

 $scope.tree_data = [
   {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
  children:[
    {Name:"California", Area:423970,Population:38340000, TimeZone:"Pacific Time",
        children:[
            {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
            {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
        ]
    },
    {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
        children:[
            {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
        ]
     }
   ]
  },    
  {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];

Optionally, you can define column definitions, properties on which you want to use expand and collapse

$scope.col_defs = [
   { field: "Description"},
   { field: "DemographicId", displayName: "Demographic Id"},
   { field: "ParentId", displayName: "Parent Id"},
   { field: "Area"},
   { field: "Population"},
   { field: "TimeZone", displayName: "Time Zone"}
];


$scope.expanding_property = "Name";

details: https://github.com/khan4019/tree-grid-directive

Comments

[Bhargav Rao]

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

[aditya]

this problem just have dedicated page, that's why I prefer to give the link. We can include link to working example, which contains all the code.