角材料グリッドリスト：グリッドリストタイルのセットを繰り返します。

Question

角度材料グリッドリストです。これは、1行（4列にまたがる）と、それぞれが4タイルからなる複数の「アイテム」行で構成されています。 Thisコードがこの問題を示しています。

各項目は独自の行を持つ必要があります。つまり、各項目に対して4つのタイルを表示する必要があります。

これを行うには、ng-repeatをタイルに配置することはできません。これは1つのタイルだけを繰り返すためです。私はng-repeatが含まれているdiv内の4つのタイルをラップしようとしましたが、これはレイアウトをねじ込みます（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-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