Achieving a 4 cell grid layout with angularjs material

Question

I need to design an html to display max 3 columns per row using ng-repeat of a JSON array as below:

Eg:

jsonArray: [1,2,3,4,5,6,7,8]

O/p expected:

| 1 | 2 | 3 | 4 |

| 5 | 6 | 7 | 8 |

With bootstrap I would do something like:

<div class="container">
  <div class="row">
    <div class="col-md-3" ng-repeat="val in jsonArray">{{val}}</div>
  </div>
</div>

I tried a similar approach with angularjs material with layout & flex as below:

<div layout="row">
  <div flex="25" ng-repeat="val in jsonArray">{{val}}</div>
</div>

But flex directive is adding all elements to the same row(Which is the expected behavior). If it's a static grid I can achieve this using a combination of layout="row" & layout="column". In my case the JSON is dynamic response of an AJAX.

What's the right approach to get this layout with angularjs-material.

Answer 1

I think layout-wrap directive should rescue you to wrap consecutive 4 rows on new line.

<div layout="row" layout-wrap>
   <div flex="25" ng-repeat="val in jsonArray">{{val}}</div>
</div>