Ionic Framework: GridLayout with multiple rows and column on which buttons placed for an arrayItem -
on page, using ng-repeat, try place buttons on grid layout. iterating through array defined in controller $scope.btnnames[]. buttons place on total number of buttons equal array size of $scope.btnnames[]
i put 4 buttons per row. $scope.btnnames[] size 20, place 20 buttons on 5 rows, each row have 4 buttons.
1) on controller : - have array button names $scope.btnnames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] size 20.
2) on page: - using ng-repeat, iterate throught the
$scope.btnnames[] , put buttons 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 me defining class="row" , class="col" , such way that, during ng-repate, after 4th button, should add new row , place 4 buttons till reach end of ng-repeat.
being new both ionic , angulrjs, i'm not able define class="row" during ng-repeat ( similar loop, where, put new class="row", when iterator counter in case {{index}} greater 4.
you can find possible solution here : https://stackoverflow.com/a/23780288/1015046
i have taken above solution , implemented 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 want grid dynamic, can take @ : https://stackoverflow.com/a/27080632/1015046
thanks.
Comments
Post a Comment