Grid Layout: specific no.buttons per row while adding them using ng-repeat

ionic-v1
1
  1. on Controller
  • I have $scope.btnNames[‘aa’, ‘bb’, ‘cc’,‘dd’, ‘ee’, ‘ff’…] array size say 20.
    this array contains button names
  1. on HML div:

    • Using ng-repeat, I put buttons as follows:

      {{btnName}}

It nicely shows buttons on a single row

As I iterate through ng-repeat, I would like to put 4 buttons per row.
Meaning, generate a grid 5x4, (5 rows, and 4 buttons per row)

Please help

2

First you need to transform your array in a array of object, just choose an atribute name for your values, like this:

[value: 'aa', value: 'bb', value: 'cc', value: 'dd', value: 'ee', value: 'ff'....]

So you apply the ng-repeat tracking by $index in the row div, and repeat the col div with the number of items per row that you want, like this:

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

In the div with the row class the ng-if value after % need to be equal the number of itens that you need. You can change it, but need to remember to change the times that you repeat the col div. You need pey attention in the col divs, you will reffer to it by the $index, so you need add +1 to the $index on each occurence per row, the first is just $index, the second $index+1, the third $index+2, and so on.

Hope this help you. :v::grin:

1 Like
3

Hi fdedeh,

Need your help placing button on ionic grid 4x3 for json object with key/value pairs as follows:

I have a feed (jsonArray, holding json objects) from a REST services as follows:
$jsonArray =[{data1},{data2},{data3},…]

where, json object “data1” holds 12 key/value pairs

data1 ={ “key1”:“Yes”, “key2”: “No”, “key3”: “Yes”, “key4”: “No”, “AnyKey11”: “Yes”, “AnyKey22”: “No”, “Anykey33”: “Yes”, “AnyKey44”: “No”, “myKey11”: “Yes”, “myKey22”: “No”, “myKey33”: “Yes”, “myKey44”: “No” }

please note that json object holding key and value where key is varying, but the values will always be either be “Yes” or “No”

I would like to place 12 buttons for the jsonObject “data1” (has 12 key/value pairs)on an ionic grid 4x3( four rows and 3 coloumn).
Button text should reflect the “Key’s”, whereas button color shall be blue for when its value is “Yes” and color red for its value is “No”.

Thus 1st button shall be a blue colored button with text as "key1"
2nd button shall be a red colored button with text as “key2”
… … … …
… … … …
… … … …
12th button shall be a red colored button with text as “myKey44”

Please help me fixing my HTML as follows

                <span ng-if="value=='Yes'" >
                    <button id={{$index}} class="button button-royal" >{{key}}</button>
                </span>
                <span ng-if="value=='No'" >
                    <button id={{$index+}} class="button button-assertive" >{{key}}</button>
                </span>

                    <span ng-if="value=='Yes'" >
                        <button id={{$index+1}} class="button button-royal" >{{key[$index+1]}}</button>
                    </span>
                    <span ng-if="value=='No'" >
                        <button id={{$index+1}} class="button button-assertive" >{{key[$index+1]}}</button>
                    </span>

                        <span ng-if="value=='Yes'" >
                            <button id={{$index+2}} class="button button-royal" >{{key[$index+2]}}</button>
                        </span>
                        <span ng-if="value=='No'" >
                            <button id={{$index+2}} class="button button-assertive" >{{key[$index+2]}}</button>
                        </span>

                            <span ng-if="value=='Yes'" >
                                <button id={{$index+3}} class="button button-royal" >{{key[$index+3]}}</button>
                            </span>
                            <span ng-if="value=='No'" >
                                <button id={{$index+3}} class="button button-assertive" >{{key[$index+3]}}</button>
                            </span>
            </div>
        </div>
</div>
4

This example should be put into the documentation! :smile: