使用AngularJs的Ionic网格布局，将按钮放在4x3行和jSon数据的列中

Question

Please help:
Would like to place buttons for a jSon data, 4 rows and 3 column(total 12 buttons) with 
   1) button name:  as jSon key ex "jan" etc (button names from Jan to Dec) 
   2) button color: blue for jSon value=="Yes" and red when value=="No".  Also, 

数据如下：     var data = {       ＆＃34;扬＆＃34;：＆＃34;是＆＃34 ;,       ＆＃34; 2月＆＃34;：＆＃34;不＆＃34;，       ＆＃34; March＆＃34;：＆＃34;是＆＃34;，       ＆＃34; April＆＃34;：＆＃34; No＆＃34;，       ＆＃34; May＆＃34;：＆＃34;是＆＃34;，       ＆＃34;六月＆＃34;：＆＃34;否＆＃34;，       ＆＃34;七月＆＃34;：＆＃34;是＆＃34;，       ＆＃34; 8月＆＃34;：＆＃34;不＆＃34;，       ＆＃34; 9月＆＃34;：＆＃34;是＆＃34;，       ＆＃34; 10月＆＃34;：＆＃34;不＆＃34;，       ＆＃34; 11月＆＃34;：＆＃34;是＆＃34;，       ＆＃34; Dec＆＃34;：＆＃34; No＆＃34;     }

</ion-content>
    <div class="row" ng-repeat="(key, value) in data" > 
       <div ng-if="$index%4==0" class="row">
            <div class="col">

                    <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>
</ion-content>

Answer 1

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="row" ng-repeat="data in datas" ng-if="$index % 4 === 0"> 
        <div class="col col-25" ng-if="$index < 12">
            <button ng-class="(datas[$index].color=='Yes'? 'button button-positive' : 'button')">{{datas[$index].month}}</button>
        </div>

        <div class="col col-25" ng-if="$index + 1 < 12">
            <button ng-class="(datas[$index+1].color=='Yes'? 'button button-positive' : 'button')">{{datas[$index+1].month}}</button>
        </div>

        <div class="col col-25" ng-if="$index + 2 < 12">
            <button ng-class="(datas[$index+2].color=='Yes'? 'button button-positive' : 'button')">{{datas[$index+2].month}}</button>
        </div>

        <div class="col col-25" ng-if="$index + 3 < 12">
            <button ng-class="(datas[$index+3].color=='Yes'? 'button button-positive' : 'button')">{{datas[$index+3].month}}</button>
        </div>
    </div>
</div>

控制器

$scope.datas = [{ "month":"Jan","color":"No"}, 
                    {"month":"Feb","color":"Yes"},
                    {"month":"March","color":"No"},
                    {"month":"April","color":"No"},
                    {"month":"May","color":"No"},
                    {"month":"June","color":"Yes"},
                    {"month":"July","color":"No"},
                    {"month":"Aug","color":"Yes"},
                    {"month":"Sept","color":"Yes"},
                    {"month":"Oct","color":"No"},
                    {"month":"Nov","color":"Yes"},
                    {"month":"Dec","color":"Yes"},
                    ];