ng-repeat numero sconosciuto di elementi nidificati

Question

Mi chiedo se esiste una soluzione semplice a questo tipo di problema.

Ho un commento oggetto, che a sua volta può contenere commenti, e quei commenti possono contenere anche commenti ... e questo può andare avanti per un numero sconosciuto di cicli.

Ecco un esempio di struttura dei dati:

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

Consente di dire con 2 livelli di commenti avrei scritto:

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

Come avrei implent miei div per il livello "n" di commenti annidati?

Answer 1

Il modo più semplice è creare un partial generico in modo da poter richiamarlo e renderlo in modo ricorsivo utilizzando ng-include.

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

Ecco il parziale:

<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> 

Il modello di dati dovrebbe essere un elenco var comments = [{ ... }].

Ho creato una demo per te e spero che sia d'aiuto.

Demo

Answer 2

È necessaria una direttiva ricorsiva. Qualcosa come this, o probabilmente meglio this.