Menu
Nadzweb.com
Nadzweb.com

Displaying hierarchical objects linearly in AngularJS using ng-repeat

Posted on June 3, 2015July 3, 2015 by admin

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.

ng-repeat-output

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>	  
  • angularjs
  • javascript
  • 1 thought on “Displaying hierarchical objects linearly in AngularJS using ng-repeat”

    1. Anonymous says:
      December 17, 2016 at 2:28 am

      I read this article completely concerning the resemblance of latest and earlier technologies, it’s remarkable article.

      Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    *
    To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
    Anti-spam image

    Tags

    .htaccess angular angular2 angular2-pipes angular4 angularjs apache bigdata blockchain children codeigniter computer graphics ethereum flot flot charts funny hadoop http javascript jquery kanban lena linux love math mathematics microsoft misc node js php phpframework php frameworks postgres pun-intended python react sass scrum scss silverstripe software ssl story valentines day wordpress

    Archives

    Recent Posts

    • Install only Postgres client 11 on Ubuntu 18.04
    • PostgreSQL – Granting access to users
    • Querying JSONB Postgres fields in SQLAlchemy
    • Angular – Writing unit tests for setTimeout in functions
    • Angular 6 – getting previous url from angular router
    ©2021 Nadzweb.com | Powered by WordPress & Superb Themes