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

ionic-framework

Solution

You can find a possible solution here : https://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 : https://stackoverflow.com/a/27080632/1015046

Thanks.

Problem

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.

Original source