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

Question

我有一个角度材料网格列表。它由一行（跨越4列）和一些＆＃39;项目组成。行，每个由4个瓦片组成。 This codepen说明了这个问题。

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

要做到这一点，我不能将ng-repeat放在图块上，因为这只会重复一个图块。我尝试在包含ng-repeat的div中包装4个tile，但是这会搞乱布局（在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

@IBAction func pressPlay(sender: UIButton){ switch sender.tag { case 0: print("button 1 pressed") case 1: print("button 2 pressed") case 2: print("button 3 pressed") case 3: print("button 4 pressed") case 4: print("button 5 pressed") default: break; } } 打破了布局。使用div {4}的md-grid-tile，并使用md-colspan内的<{p}}打破它：

div

Demo in codepen