alee046 alee046 - 1 month ago 14
CSS Question

using ng-repeat with google materials flex box (with wrap?)

I am trying to create a 2 by 2 grid iterating with

ng-repeat
and using the flex box. I have seen some examples where
flex-wrap:wrap
attribute would produce the effect I want, but I haven't been able to get the flex-widths to work correctly. The following is the mark down I have, with screenshots for wide, and mobile view, respectively. I am trying to get the wide view to render a 2x2 box.

<div layout="row" layout-xs="column">

<div layout="row" layout-xs="row" flex-sm="25" flex-gt-sm="50" ng-repeat="sellingPoints in detailCtrl.sellingPointsMenu" class="selling-points-wrapper">
<div class="selling-points-picture">
<md-icon md-svg-icon="{{ sellingPoints.icon }}" aria-label="Expand"></md-icon>
<div class="selling-points-text">{{ sellingPoints.title }}</div>
</div>
</div>




https://imgur.com/Ceov0U6 -- wide-view
https://imgur.com/tuuBe0D -- mobile-view

Answer

Is this the kind of thing you want? CodePen

enter image description here

Markup

<div ng-controller="AppCtrl as ctrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
  <div style="background:pink" flex="10"></div>
  <div flex="50" layout="row" layout-wrap>
    <div ng-repeat="item in ctrl.items" style="background:{{item}}; width:50%"></div>
  </div>
  <div style="background:grey" flex="10"></div>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.items = ["red", "green", "purple", "orange"];
});
Comments