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.

  

    

	
Name
	
Size
    
    
 
	
- {{ parent.name }}
	
{{ parent.size }}
    
    
 
	
-- {{ child.name }}
	
{{ child.size }}
    

    
 
	
--- {{ grandChild.name }}
	
{{ grandChild.size }}