角度材质网格列表:重复一组网格列表图块

Question

我有一个角度材料网格列表.它由一行(跨越4列)和许多"项"行组成,每行包含4个图块.这个 codepen说明了这个问题.

每个项目都应该有自己的行,即对于每个项目,应该渲染4个图块.

要做到这一点,我不能把它ng-repeat放在一个瓷砖上,因为这只会重复一个瓷砖.我尝试将4个ng-repeat磁贴包装在包含它的div中,但这会搞砸布局(在Codepen中:取消注释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>
    <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-grid-tilewith md-colspan,并使用divs inside 打破它:

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

在codepen中演示