Ionic Framwork: GridLayout with multiple rows and column on which buttons placed for an arrayItem

Please help. On a page, using ng-repeat, I try to place buttons on a grid layout. Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on Total number of buttons equal to array size of $scope.btnNames[]

I would like to put say 4 buttons per row. As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows, where each row will have 4 buttons.

1) on Controller : - I have an array with button names $scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.

2) on the page: - using ng-repeat, iterate throught the
$scope.btnNames[] and put buttons as per follwoing code

<body ng-controller="PopupCtrl">
 <div class="row responsive-sm"> 
    <div ng-repeat="btnName in btnNames"> 
       <button id={{$index}} class="button button-dark col" >{{btnName}}</button>
    </div>
</div>

Please help me defining class="row" and class="col" and such a way that, during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.

Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4.

Thanks in advance.

Use flex-wrap

You can get this behavior by using style="flex-wrap: wrap;" + the following CSS classes:

<div class="row" style="flex-wrap: wrap;">
    <div class="col col-25" ng-repeat="btnName in btnNames"> 
        <button class="button button-dark" >{{btnName}}</button>
    </div>
</div>

http://codepen.io/Jossef/pen/doeJJP

You can find a possible solution here : http://stackoverflow.com/a/23780288/1015046

I have taken the above solution and implemented it for Ionic : http://codepen.io/arvindr21/pen/EaVLRN

<div ng-repeat="btnName in btnNames">
   <div ng-if="$index%4==0" class="row">
      <div class="col">
         <button id={{$index}} class="button button-dark">{{btnNames[$index]}}</button>
         <button id={{$index+1}} class="button button-dark">{{btnNames[$index+1]}}</button>
         <button id={{$index+2}} class="button button-dark">{{btnNames[$index+2]}}</button>
         <button id={{$index+3}} class="button button-dark">{{btnNames[$index+3]}}</button>
      </div>
   </div>
</div>

If you want the grid to be dynamic, you can take a look at : http://stackoverflow.com/a/27080632/1015046

Thanks.

I would just like to add to the @Jossef Harush's answer (which, btw, worked).

However, when I tested it in the Ionic View application on iPhone, it didn't work. When I tested it in the Ionic View application on Android it worked as expected (multiple rows).

The solution was to add this as a style:

style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"

because, as you can see here Safari needs a -webkit prefix.

Hope this helps someone who will choose this solution over @Arvind's.