Question

是否可以使用ng-repeat（给定下面的数据源）来创建以下DOM结构？

JS

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

HTML输出

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

我不想更改数据源，我也尝试过播放ng-repeat-start和ng-repeat-end无济于事。我想也许我可以使用多个ng-repeat实例（一个用于创建开始标记，另一个用于创建结束标记）但我不确定如何实现它。

我是否需要为此编写自定义指令？

更新 sylwester描述的解决方案仅在您知道数据数组的大小时才有效，但是我对基于不确定数组长度呈现所需div的解决方案感兴趣。

Answer 1

请看这里：http://jsbin.com/tijiq/1/正在运作，但不建议您自己很容易迷失。

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

使用ng-repeat创建嵌套的dom结构

1 个答案: