Question

给定一个带有以下DOM API的Angular指令：

<my-tree>
  <my-tree-item>First</my-tree-item>
  <my-tree-item>Second</my-tree-item>
  <my-tree-item>Third</my-tree-item>

  <my-tree-group>
    A group

    <my-tree-item>Forth</my-tree-item>
    <my-tree-item>Fifth</my-tree-item>
    <my-tree-item>Sixth</my-tree-item> 
  </my-tree-group>
</my-tree>

如何使用模板和以下数据结构创建类似的内容：

[
        {
            name: 'First'
        },
        {
            name: 'Second'
        },
        {
            name: 'Third'
        },
        {
            name: 'A group',
            children: [
                {
                    name: 'Forth'
                },
                {
                    name: 'Fifth'
                },
                {
                    name: 'Sixth'
                }
            ]
        }
    ]

真实的数据结构可以持续到任何深度。

似乎需要ng-repeat和ng-switch，但需要或留下额外的DOM节点。例如，应该重复使用ng-repeat，因为该项目可以是2种类型中的1种。当使用ng-switch时，它似乎有助于将其用作元素，但在DOM中留下了ng-switch。

我考虑过合并my-tree-item和my-tree-group，但是有了单独的指令似乎有意义，因为my-tree-group会有额外的选项，不适用于常规项目。

有没有办法在没有额外节点的情况下使用Angular创建这个精确的结构？

有没有更好的方法来解决这个问题？

Answer 1

您需要做的是创建一个指令来处理您所需的层次结构。您通过属性<div my-tree="somejsonobj"></div>将json对象传递给指令，然后让指令构建所需的DOM。

让指令循环遍历JSON层次结构的当前级别，并创建适当的节点。如果当前项目具有children（基于您的上述模式），则创建一个DOM节点，该节点本身是您的指令的新实例，但是传入当前项目，并将子项作为根。

显然，如果您可以创建额外的节点ng-repeat，这将更加简单，因为您不需要任何自定义指令。

以下是我在树上发现的快速示例帖子：http://blog.stackfull.com/2014/02/trees-in-angularjs/

Angular.js如何从JSON数据创建嵌套树指令

1 个答案: