Using ng-repeat to created a nested dom structure

Question

Is it possible to use ng-repeat (given the data source below) to create the following DOM structure?

JS

scope.data = ['a', 'b', 'c', 'd']; // The size of this array varies

HTML output

<div class="a">
    <div class="b">
        <div class="c">
            <div class="d">
            </div>
        </div>
    </div>
</div>

I don't want to change the data source, and I have also tried playing ng-repeat-start and ng-repeat-end to no avail. I was thinking that perhaps I could use multiple ng-repeat instances (one to create the opening tag and the other to create the closing tag) but am not sure how I could implement this.

Would I need to write a custom directive for this?

UPDATE The solution described by sylwester only works if you know the size of the data array, however I am interested in a solution that renders the required divs based on a indeterminate array length.

Just create a [recursive directive](http://stackoverflow.com/questions/14430655/recursion-in-angular-directives). The process is exactly the same as the one used in recursive function: it call itself, unless an ending condition is fulfilled. — Blackhole, Aug 05 '14 at 11:23

score -1 · Answer 1 · answered Aug 05 '14 at 11:11

-1

Please see here :http://jsbin.com/tijiq/1/ is working but not recommended as very easy to lost yourself.

 <div class="{{data[0]}}">
    <div class="{{data[1]}}">
        <div class="{{data[2]}}">
            <div class="{{data[3]}}">
              hello
            </div>
        </div>
    </div>
</div>

answered Aug 05 '14 at 11:11

sylwester

16,498
1
25
33

That works if you know the size of the array. However I am more interested in if you do not know the size of the array. I will update my question so it makes this clear. – romiem Aug 05 '14 at 13:09

Using ng-repeat to created a nested dom structure

1 Answers1