Shailendra Sharma Shailendra Sharma - 12 days ago 5
AngularJS Question

data iteration in directive for org chart

Here a plunker which have css based Organization Chart, i am tring to make it dynamic in angular js plunker_angular js, i am new to custom directive,

is there any way to itrate my

$scope.data
with keep in mind it's parentId to draw a organation chart how can i do this using directive plunker_angular js

depth of chart can be nth level , any help ?

gyc gyc
Answer

With your actual model, it's not easy to do. You would have to create UL elements on the fly while looping through the data with parentId = null.

I propose you change your data model into a hierarchy of objects like so:

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

This way a parent has children and you can nest ng-repeat:

<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

EDIT:

To build an infiite tree, you can just make the directive call itself.

<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

Comments