數據迭代組織結構圖

Question

這裏一個plunker具有基於CSS的組織結構圖，我特林使其在角JS plunker_angular js動態，我是新來的自定義指令，

有沒有什麼辦法來itrate我$scope.data請記住它的parentId來繪製組織圖我該如何使用這個指令來做這個plunker_angular js

深度圖可以是第n級，任何幫助？

Answer 1

隨着您的實際模型，這並不容易。您將不得不在使用parentId = null循環數據時快速創建UL元素。

我建議你改變你的數據模型爲對象的層次結構，像這樣：

[{ 
    'id':1, 
    'name':'Shailendra Sharma', 
    'children': [ 
    {'id':2,'name':'sonu'}, 
    {'id':3,'name':'Rahul'}, 
    {'id':4,'name':'sam'}, 
    {'id':5,'name':'Jhon'} 
    ] 
}] 

這樣父母有孩子，你可以嵌套NG-重複：

<div class="tree"> 
    <ul> 
    <li ng-repeat="d in data"> 
     <a href="#">{{d.name}}</a> 
     <ul> 
     <li ng-repeat="c in d.children"> 
      <a href="#">{{c.name}}</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Plunker

編輯：

要建立一個infiite樹，你可以讓指令自己調用。

<ul> 
    <li ng-repeat="d in data"> 
    <a href="#">{{d.name}}</a> 
    <hierarchical-view ng-if="d.children" data="d.children"></hierarchical-view> 
    </li> 
</ul> 

Plunker