ng-repeat重复指令所在的div

Question

我有以下代码：

<div ng-repeat="item in selectedCategory">
    <div class="repertoire-composer">
        <div data-toggle="collapse" data-target="#compositions{{$index}}"
             class="repertoire-composer-title">
            <span class="fa fa-chevron-right"></span>
            {{item.composer}}
            <span class="fa fa-plus"></span>
        </div>
        <div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">
            <div class="repertoire-composition">
                {{composition}}
                <span class="fa fa-remove" title="Remove"></span>
            </div>
        </div>
    </div>
</div>

所以我基本上想要的是拥有一个包含多个.repertoire-composer div的树，每个div在其.repertoire-composition div中有一个或多个子.repertoire-compositions。所以在第二次重复中，angular应创建一个或多个.repertoire-composition div。然而，它似乎做的是创建更多指令所在的div。希望我已经足够明确，这是不必要的结果：

基本上，为什么我的.repertoire-compositions div会重复？

修改

我误解了ng-repeat。这是它的预期行为：重复指令所在的元素。谢谢你的澄清。

Answer 1

.repertoire-compositions并未被重复，因为模板的这一部分实际上已经重复了这些内容：

<div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">

Answer 2

我想这是因为item.compositions上的第二次ng-repeat，你能提供一组数据吗？

Answer 3

我不确定，但你可以在内部中继器中试试这个：

<div id="compositions{{$index}}"  class="repertoire-compositions collapse">
        <div class="repertoire-composition" ng-repeat="composition in item.compositions">
            {{composition}}
            <span class="fa fa-remove" title="Remove"></span>
        </div>
    </div>