Displaying hierarchical objects linearly in AngularJS using ng-repeat

Very often we come across data objects that have parent-child-grandchild relationship in hierarchical structure.Displaying this in hierarchy is usually easy but the problem exists when one has to display it in linear or flat structure.

Assume we have a data set as parent->child->grandChild and we plan to display this in table linearly. AngularJS’ built in directive ng-repeat makes it quite easy to iterate and output the object attributes. It produces the linear output as below in tabular form.

The below snippet shows ng-repeat with other attributes as ng-repeat-start and ng-repeat-end. Download this code from github to see how it works.

  <table>
    <tr class="dark-grey">
	<th>Name</th>
	<th>Size</th>
    </tr>
    <tr ng-repeat-start="parent in results.children" class="grey"> <!-- repeating parent -->
	<td>- {{ parent.name }}</td>
	<td>{{ parent.size }}</td>
    </tr>
    <tr ng-repeat-start="child in parent.children" class="light-blue"> <!-- repeating child -->
	<td>-- {{ child.name }}</td>
	<td>{{ child.size }}</td>
    </tr>

    <tr ng-repeat-end ng-repeat-start="grandChild in child.children" class="light-green"> <!-- repeating grandchild -->
	<td>--- {{ grandChild.name }}</td>
	<td>{{ grandChild.size }}</td>
    </tr>
    <tr ng-repeat-end></tr> 
    <tr ng-repeat-end></tr> 
 </table>