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>
I read this article completely concerning the resemblance of latest and earlier technologies, it’s remarkable article.