CODEWITHSUNDEEP
javascripthtmlangularjsmaterial-designangular-material
fikkatra
fikkatra

Reputation: 5822

angular material grid list: repeat a set of grid-list-tiles

I hava an angular material grid list. It consists of a single row (spanning 4 columns), and a number of 'item' rows, each consisting of 4 tiles. This codepen illustrates the problem.

Each item should have its own row, i.e. for each item, 4 tiles should be rendered.

To do this, I cannot put the ng-repeat on a tile, because this would repeat only a single tile. I tried wrapping the 4 tiles within a div that contains the ng-repeat, but this screws up the layout (in Codepen: uncomment the div).

enter image description here

This is my code:

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

Any ideas on how to properly render a grid list with a repeating set of tiles?

Upvotes: 0

Views: 2893

Answers (1)

Ron Dadon
Ron Dadon

Reputation: 2706

The div is breaking the layout. Use a md-grid-tile with md-colspan of 4, and break it using 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>

Demo in codepen

Upvotes: 5

Related Questions