2013-08-18 68 views
7

我想知道是否有這種類型的問題的簡單解決方案。ng-repeat嵌套元素的未知數

我有一個對象註釋,它可以包含註釋,並且這些註釋也可以包含註釋...並且這可以持續未知數量的週期。

下面是數據結構的例子:

var comment = { 
    text : "", 
    comments: [ 
     { text: "", comments : []}, 
     { text: "", comments: [ 
     { text: "", comments : []}, 
     { text: "", comments : []} 
     { text: "", comments : []} 
     ]} 
    ] 
} 

比方說2級水平的意見,我會寫:

<div ng-repeat="comment in comments"> 
    {{comment.text}} 
    <div ng-repeat="comment in comments"> 
     {{comment.text}} 
    </div> 
</div> 

我怎麼會implent我的div爲「N」級嵌套評論?

回答

9

最簡單的方法是創建一個泛型部分,以便您可以遞歸調用並使用ng-include進行渲染。

<div ng-include="'partialComment.html'" ng-model="comments"></div> 

下面是部分:

<ul> 
    <li ng-repeat="c in comments"> 
     {{c.text}} 
     <div ng-switch on="c.comments.length > 0"> 
     <div ng-switch-when="true"> 
      <div ng-init="comments = c.comments;" ng-include="'partialComment.html'"></div> 
     </div> 
     </div> 
    </li> 
</ul> 

數據模型應該是一個列表var comments = [{ ... }]

我爲你創建了一個演示,希望它有幫助。

Demo

+0

會有一種方法可以隱藏除遞歸中第一組外的所有元素嗎? – guiomie

+0

@guiomie你可以檢查ng轉發器中的$ first參數。 – zsong

+0

我的意思是隱藏所有不在第一個數組中的元素,而不是每個數組的第一個元素。所以只有第一個註釋數組的元素不會被隱藏...... – guiomie

1

您需要一個遞歸指令。類似於this,或者更好的this

+0

的[gistflow](http://gistflow.com/posts/843-creating-recursive-templates-in-angular-js)鏈路是死的。 –