javascript - Angular Material 网格列表: repeat a set of grid-list-tiles

Question

我有一个 Angular Material 网格列表。它由单行(跨 4 列)和多个“项目”行组成，每行由 4 个图 block 组成。 This codepen 说明了这个问题。

每个项目应该有自己的行，即对于每个项目，应该渲染 4 个图 block 。

为此，我无法将 ng-repeat 放在图 block 上，因为这只会重复一个图 block 。我尝试将 4 个图 block 包装在包含 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>

关于如何使用一组重复的图 block 正确渲染网格列表有什么想法吗？

Answer 1

div 破坏了布局。使用 md-grid-tile 和 md-colspan 为 4，并使用内部的 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