角材料网格列表：重复一组网格列表瓦片

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