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

Question

这里有一个plunker，它有基于 css 的组织结构图，我想在 angular js plunker_angular js 中使它动态化，我是自定义指令的新手，

有什么方法可以迭代我的$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-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