Tree Table With Angular ngRepeat

Question

We need to display some tabular data according to a hierarchy. For example a list of country with their population and the area they cover, along with some of their cities. It could go to deeper levels as well such as neiborhood, etc.

Place        Population    Area
---------------------------------
Canada      33,500,000     10,000,000
  Toronto    2,600,000         612
  Montreal   1,300,000         300
USA         317,000,000     9,800,000
  ...          ...             ...
  ...          ...             ...
     ...       ...             ...           
     ...       ...             ... 

I've tried to used Angular and ngRepeat to create a Tree table to display this hierarchy but it doesn't work. I also tried this nice solution from Brendan Owen http://jsfiddle.net/brendanowen/uXbn6/8/ that uses ul and li tags but it doesn't work either when table and tr/td tags are used. Is it possible to accomplish this for a table?

Answer 1

Whilst it doesn't use a HTML table, have you checked out the angular dynamic-tree ?

It may also be worth checking out the blog post which spawned it , since there is a little less code to digest there.

If you are looking for an example, here is a jsFiddle . Where your html would simply become something like:

<ui-tree
    ng-model="assets"
    load-fn="loadChildren"
    expand-to="hierarchy"
    selected-id="111"
    attr-node-id="assetId" />

Answer 2

This project offers good Angular tree with a good following (435+ starred).

https://github.com/nickperkinslondon/angular-bootstrap-nav-tree

A sample of the tree can be found here. http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs3_ng120_test_page.html

For non-Angular option, jquery treetable does offer a fairly easy implementation.

http://ludo.cubicphuse.nl/jquery-treetable/

Each node (parent, child or subsequent children) needs to be a tr element in table, needing to specify id of its own and of the parent node.

<table>
    <tr data-tt-id="1">
        <td>Parent</td>
    </tr>
    <tr data-tt-id="2" data-tt-parent-id="1">
        <td>Child</td>
    </tr>
</table>