How do I render tree structure data by using directive's template

Question

Have anyone tried to render tree structure data by using directive?

What I wanted to do is rendering the data like...

{ 
  name: "root", 
  next: null,
  child: {
    name : "1"
    next : {
      name : "2",
      next : {
        name: "3",
        next: null,
        child: null
      }, 
      child: {
        name: "2-1",
        next: null,
        child: null
      }
    },
    child: {
      name: "1-1",
      next: {
        name: "1-2",
        next: null,
        child: null
      },
      child: null
    }
  }
}

to HTML data like

<ul>
  <li> root 
    <ul>
      <li> 1 
        <ul>
          <li> 1-1 </li>
          <li> 1-2 </li>
        </ul>
      </li>
      <l1> 2 
        <ul>
          <li> 2-1 </li>
        </ul>
      </li>
      <li> 3 </li>
    </ul>
  </li>
</ul>

I know if data is an array, I can use "ng-repeat" for template, and also if data is an object I know the structure, I can use "{{ }}" tag.

But I don't have any idea for treating object data will change dynamically. That means I also want to add some child to the data as one object in $scope, and render it synchronously using angular.js .

Does anyone have a great idea or the experience you did it?

Take a look at [wiki](https://github.com/angular/angular.js/wiki/JSFiddle-Examples). You'll find several "tree directive" examples there. — Stewie, Mar 25 '13 at 10:15
Possible duplicated thread [here](http://stackoverflow.com/questions/11854514/is-it-possible-to-make-a-tree-view-with-angular) — Viliam, Dec 04 '13 at 19:39
If you build your tree using `ng-repeat` and `{{}}` if you change something in data the tree will change, that's how angular work. — jcubic, Jul 04 '14 at 17:52

score -2 · Answer 1 · answered Jul 13 '14 at 12:57

angularjs

<div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">     

  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
  </ul>
</div>

result

[1] John who is 25 years old.
[2] Jessie who is 30 years old.
[3] Johanna who is 28 years old.
[4] Joy who is 15 years old.
[5] Mary who is 28 years old.
[6] Peter who is 95 years old.
[7] Sebastian who is 50 years old.
[8] Erika who is 27 years old.
[9] Patrick who is 40 years old.
[10] Samantha who is 60 years old.

This is just a simple list and not a tree. – Tiberiu C. Sep 23 '15 at 13:02 — Tiberiu C., Sep 23 '15 at 13:02

How do I render tree structure data by using directive's template

1 Answers1