组织结构图指令中的数据迭代

Question

这里是plunker which have css based Organization Chart, i am tring to make it dynamic in angular js plunker_angular js，我是自定义指令的新手，

有什么方法可以迭代我的 $scope.data 记住它是绘制组织结构图的 parentId 我如何使用指令 plunker_angular js

来做到这一点

图表的深度可以是第 n 级，有帮助吗？

Answer 1

以您的实际模型，这并不容易。在使用 parentId = null.

遍历数据时，您必须即时创建 UL 元素

我建议您将数据模型更改为 objects 的层次结构，如下所示：

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

这样 parent 就有 children 并且你可以嵌套 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

编辑：

要构建无限树，您只需让指令自行调用即可。

<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

组织结构图指令中的数据迭代

data iteration in directive for org chart

javascript

logic

angularjs

angularjs-directive

ng-repeat