2016-04-15 136 views
1

我有以下代碼:NG重複重複的div指令是

<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的一棵樹,每一個與一個或多個子女的.repertoire-composition在其.repertoire-compositions div內。因此,在第二次重複中,角度應創建一個或多個div。然而,它似乎做的是創建更多的指令所在的div。希望我已經足夠明確,這裏的事與願違的結果:

enter image description here

所以基本上,爲什麼我的.repertoire-compositions DIV得到複製?

編輯:

我被誤解ng-repeat。這是它的預期行爲:重複指令所在的元素。感謝您的澄清。

+0

.repertoire-compositions沒有被複制它實際上是ng- – shershen

回答

2

.repertoire-compositions沒有被複制它實際上由模板的這部分NG-重複:

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

這行不是應該複製這個div的內容多次作爲集合中的項目嗎?您可以在示例中看到有多個'.repertoire-compositionS' –

+0

不,這一行是REPEATING此標記以及集合中每個項目的內部內容;在生成的DOM中,您擁有與每個item.compositions數組中的項目一樣多的.repertoire-compositionS。 – shershen

+0

似乎我誤解了此指令。感謝您的澄清。 –

0

我想這是因爲item.compositions上的第二個ng-repeat,你能提供一組數據嗎?

0

我不知道,但你可以在內部轉發試試這個:

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