角材料網格列表：重複一組網格列表瓦片

Question

我有一個角材料網格列表。它由一行（跨越4列）和許多'項目'行組成，每行包含4個瓷磚。 This codepen說明了這個問題。

每個項目應該有自己的行，即每個項目，應該呈現4個瓷磚。

要做到這一點，我不能把ng-repeat放在一個圖塊上，因爲這隻會重複一個圖塊。我嘗試在包含ng-repeat的div內包裝這4個貼圖，但是這會使佈局（在Codepen中取消註釋）取消註冊。

這是我的代碼：

<md-grid-list md-cols="4" md-row-height="4:1" md-gutter="8px"> 
    <md-grid-tile class="gray" md-colspan="4"> 
     <div layout="column" layout-fill>this is a static row</div> 
    </md-grid-tile> 
    <div ng-repeat="item in appCtrl.items"> 

     <md-grid-tile class="gray"> 
     <div layout="column" layout-fill>this row</div> 
     </md-grid-tile> 
     <md-grid-tile class="gray"> 
     <div layout="column" layout-fill>should repeat</div> 
     </md-grid-tile> 
     <md-grid-tile class="gray"> 
     <div layout="column" layout-fill>for every</div> 
     </md-grid-tile> 
     <md-grid-tile class="gray"> 
     <div layout="column" layout-fill>item</div> 
     </md-grid-tile> 
    </div> 
</md-grid-list> 

如何正確地呈現網格列表具有重複瓦片的集合任何想法？

Answer 1

div正在打破布局。使用具有4 md-colspan一個md-grid-tile，它使用div的內線突破：

<md-grid-list md-cols="4" md-row-height="4:1" md-gutter="8px"> 
    <md-grid-tile class="gray" md-colspan="4"> 
     <div layout="column" layout-fill>this is a static row</div> 
    </md-grid-tile> 
    <md-grid-tile class="gray" ng-repeat="item in appCtrl.items" md-colspan="4"> 
     <div layout="row" flex> 
      <div flex>this row</div> 
      <div flex>should repeat</div> 
      <div flex>for every</div> 
      <div flex>item</div> 
     </div> 
     </md-grid-tile> 
</md-grid-list> 

Demo in codepen