Как визуализировать данные древовидной структуры с помощью шаблона директивы

Question

Кто-нибудь пытался отобразить данные древовидной структуры с помощью директивы?

То, что я хотел сделать, это делает данные как ...

{ 
    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 
    } 
    } 
} 

в HTML-данные, такие как

<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> 

Я знаю, если данные представляют собой массив, я могу использовать «нг-повтор "для шаблона, , а также если данные являются объектами, я знаю структуру, я могу использовать тег" {{}} ".

Но я не знаю, как обрабатывать данные объекта будет динамически изменяться. Это означает, что я также хочу добавить некоторый дочерний элемент в данные как один объект в $ scope, и визуализировать его синхронно с помощью angular.js.

Есть ли у кого-то отличная идея или опыт, который вы сделали?

Answer 1

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> 

результат

[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.