javascript - How to create a horizontal grid using ng-repeat and fixed number of rows -

i have simple array of text objects want display in grid. using ionic framework.

the grid must be:

1. fixed height
2. exactly 3 rows
3. horizontal scroll (infinite columns)
4. 2 visible columns screen width < 768px (phones), 4 visible columns 768px , above (tablets)

i have media query column widths , using horizontal scrolling functionality.

how can use ng-repeat (maybe ngif ??) create grid, starting in first column , filling column 3 rows before moving next column etc etc)

js

var items = [ {text: "this item1"}, {text: "this item2"}, {text: "this item3"}, . . . ] 

css:

.mygridrow {   height: 40%;  }  .mygridcol {    width: 50%;  }  @media screen , (min-width : 768px) {    .mygridcol {      width: 25%;    }  } 

html

<ion-scroll direction="x">  <div class="row mygridrow"> <!-- single container whole grid -->    <div ng-repeat="item in items"> <!-- 3 times before starting new row -->    <div class="row"><div class="col mygridcol">{{item.text}}</div></div>   </div>  </div> </ion-scroll> 

desired output

i stuck here trying determine how move next column after each 3 rows, or if right way this.

ng-repeat constrained iterate on collection , not work integer input. however, can create placeholder collection number of repetitions required:

$scope.items = [/* base collection */]; $scope.itercount = 3; // number of iterations before new row created $scope.itemcount = math.floor($scope.items.length / $scope.itercount);  // collection of items equally spaced each other. // example: getspaceditems([1, 2, 3, 4], 0, 2) == [1, 3] $scope.getspaceditems = function(collection, start, space) {   var subcoll = [];   for(var = start; < collection.length; += space) {     result.push(collection[i]);   }    return result; };     

these values can applied view in manner:

<div>   <div class="row" ng-repeat="n in [0, 1, 2] track $index">     <div class="col mygridcol" ng-repeat="item in getspaceditems(items, $index, itercount)">{{item.text}}</div>   </div> </div>