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

给定一个角指令具有以下DOM API：Angular.js如何从JSON数据创建嵌套树指令

<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，因为该项目可以是两种类型中的一种。当使用ng-switch时，它似乎有助于将它用作元素，但是在DOM中留下了一个ng开关。

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

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

有没有更好的方法来处理这个问题？

来源

2014-06-16 corsen

做多余的节点导致什么问题？ –

可以在指令中使用'replace：true'，因此不存在额外的节点 – charlietfl

@MattWay这些指令指向一个现有的代码库。额外的节点破坏了代码中关于DOM结构的某些假设，这会破坏功能和样式。 – corsen

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

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

很明显，如果你确定额外的节点ng-repeat创建好了，这将会简单得多，因为你不需要任何自定义指令。

下面是一个简单的例子后我在树中找到喜欢的指令：http://blog.stackfull.com/2014/02/trees-in-angularjs/

来源

2014-06-16 21:13:28

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

回答

相关问题