Question

这里有plunker有基于CSS的组织结构图，我想在角度js plunker_angular js中使其动态，我是自定义指令的新手，

是否有任何方法来记录我的$scope.data，请记住它的parentId绘制组织结构图如何使用指令plunker_angular js

来执行此操作

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

Answer 1

使用您的实际模型，这并不容易。您必须动态创建UL元素，同时使用parentId = null循环数据。

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

[{
  '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

编辑：

要构建一个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

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

1 个答案: