ng-repeat unknown number of nested elements

angularjs, angularjs-ng-repeat, javascript

Solution

The easiest way is to create a generic partial so you can recursively call and render it using `ng-include`.

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

Here is the partial:

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

The data model should be a list `var comments = [{ ... }]`.

I created a demo for you and hope it helps.

Demo

Problem

I'm wondering if there is a simple solution to this type of problem. I have an object comment, which can in turn contain comments, and those comments can also contain comments ...and this can go on for a unknown number of cycles. Here is an example of the data structure: ``` var comment = { text : "", comments: [ { text: "", comments : []}, { text: "", comments: [ { text: "", comments : []}, { text: "", comments : []} { text: "", comments : []} ]} ] } ``` Lets say for 2 levels of comments I would write: ``` <div ng-repeat="comment in comments"> {{comment.text}} <div ng-repeat="comment in comments"> {{comment.text}} </div> </div> ``` How would I implent my divs for "n" level of nested comments ?

Original source