Ng-repeat Unknown Number Of Nested Elements

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

Solution 1:

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

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

Here is the partial:

<ul><ling-repeat="c in comments">
      {{c.text}}
      <divng-switchon="c.comments.length > 0"><divng-switch-when="true"><divng-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

Solution 2:

You need a recursive directive. Something like this, or probably better this.