角度材质网格列表：重复一组网格列表瓷砖答案

【问题标题】：angular material grid list: repeat a set of grid-list-tiles角度材质网格列表：重复一组网格列表瓷砖
【发布时间】：2016-09-26 14:03:30
【问题描述】：

我有一个角度材质网格列表。它由单行（跨越 4 列）和许多“项目”行组成，每行由 4 个图块组成。 Thiscodepen 说明了这个问题。

每个项目都应该有自己的行，即对于每个项目，应该呈现 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>

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

【问题讨论】：

标签： javascript html angularjs material-design angular-material

【解决方案1】：

div 正在破坏布局。使用md-grid-tile 和md-colspan 4，并在内部使用divs 打破它：

<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

【讨论】：