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數據創建嵌套樹指令

回答

相關問題