2013-03-25 3 views
4

지시어를 사용하여 트리 구조 데이터를 렌더링하려는 사람이 있습니까? 나는 데이터가 배열 인 경우, 내가 사용할 수 있습니다 알고지시어의 템플릿을 사용하여 트리 구조 데이터를 렌더링하는 방법

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

같은 HTML 데이터에 내가 좋아하는 데이터를 렌더링하고 싶었다 무엇

...

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

"NG 반복 "템플릿의 경우 이고 데이터가 구조체를 알고있는 객체 인 경우"{{}} "태그를 사용할 수 있습니다.

하지만 개체 데이터가 동적으로 변경되는 것을 치료할 생각은 없습니다. 즉, $ scope에있는 하나의 객체, 즉 에 일부 자식을 데이터에 추가하고 angular.js를 사용하여 동 기적으로 렌더링하려고합니다.

누구나 좋은 생각이나 경험을 한 사람이 있습니까?

+3

를 살펴 보자 [위키] (https://github.com/angular/angular.js/wiki/JSFiddle-Examples). 거기에 몇 가지 "트리 지시문"예제가 있습니다. – Stewie

+0

오, 나는 그것을 발견하지 못한다. 고마워요! – Shunter1112

+1

가능한 중복 스레드 [여기] (http://stackoverflow.com/questions/11854514/is-it-possible-to-make-a-tree-view-with-angular) – Viliam

답변

-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. 
+0

이것은 단순한 목록 일뿐 트리가 아닙니다. –

관련 문제