How to: Angular Tree?

Question

Hi all you experts out there.

My testing area: http://plnkr.co/edit/ddJT1e4a8L5NTSIVNTk7

I am trying to visualize hierarchical data in a tree-form with Angular, even though i'm using some samples to aid me in my quest (like http://jsfiddle.net/alalonde/NZum5/ and http://jsfiddle.net/brendanowen/uXbn6/8/) i fail.

Global structure

As soon as i place the recursive element ng-include inside the ng-repeat in side the template it self, the memory usage of its browser-window goes through the roof and effectively hangs the browser. But the available tree-sample i could find are doing just that.

What am i missing?

to make peoples lives a bit easier: github.com/dotJEM/angular-tree — Jens
– Jens, Commented Jul 8, 2014 at 17:30

Olivier.Roger · Accepted Answer · 2014-07-01 11:59:36Z

1

You need to use the same variable name in the template. The current node is called node in the controller then child in the template.

This cause the template to render the same node over again. It works fine if you use the same variable name :

<li ng-repeat="node in node.children" ng-include="'node.html'"></li>

See it in action here : http://plnkr.co/edit/mjfdSEDcMK8kGCRjS6V6?p=preview

answered Jul 1, 2014 at 11:59

Olivier.Roger

4,2296 gold badges44 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SvenL Over a year ago

This indeed works, feels a little strange though 'overriding' a variable this way.

Olivier.Roger Over a year ago

It is a question of scope. The template is applied into the ng-repeat from your list. As the template explicitly referes to a variable called 'node' (which was defined in the controller) that one will be used unless it is defined in a closed scope. The spike in memory usage indicates that there was an infinite loop as that node defined in the controller always has 3 childrens which will be looped over forever.

DineshKP Over a year ago

@SvenL make sure to add ng-show="node.isOpen" to your ul element

Meligy · Accepted Answer · 2014-07-15 04:05:48Z

If anyone here wants to avoid having the extra ng-repeat outside of the template (where it kind of includes stuff from the template anyway), here's a fiddle showing how to do it:

http://jsbin.com/hokupe/1/edit

Also here's a blog post and a 10-15 minutes video on how it works:

http://gurustop.net/blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree/

Sample Code:

  <script type="text/ng-template" id="treeLevel.html">
    <ul>
      <li ng-repeat="item in items">
        <input type="checkbox"
          name="itemSelection"
          ng-model="item._Selected" />
        {{item.text}}
        <div ng-include=" 'treeLevel.html'"
            onload="items = item.children">
        </div>
      </li>
    </ul>
  </script>
  <div ng-include=" 'treeLevel.html' "
       onload="items = sourceItems">
  </div>

Collectives™ on Stack Overflow

How to: Angular Tree?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related