ionic 控制每个ion-slide 显示的数量

最近在学习ionic ，写项目时候遇到个问题，ion-slide-box中，想控制每个ion-slide片中显示3个div块。

查询了各种大神的帖子，现在想到个解决办法，记录下来，方便以后使用：

在js里面把从后台拿到的数据做处理，遍历后转化成2个数组，里层数组的元素个数控制成每个ion-slide中要显示的数量，外层用来装里层数组;

然后,在页面中用2个ng-repeat来遍历，就能达到这个效果。

页面代码如下：

    <ion-content>
        <ion-slide-box style="margin-top:3rem">
             <ion-slide ng-repeat="prizes in items" class="row">
                 <div class="col" style="padding-top:0;padding-bottom:0" ng-repeat="prize in prizes.prizeList" >
           <div>
               <a href="" class="price_border" ng-click="pop_confirm()">
              <p class="tit" ng-bind="prize.name"> 电话费 </p>
              <p class="subtit"> 立即兑换 </p>
              <div>
                <p><img src="{{prize.src}}" /></p>
              </div>
              <p class="counter">面值：{{prize.price}}元</p>
            </a>
           </div>
          </div>
             </ion-slide>
      </ion-slide-box>
    </ion-content>

controller中的代码 如下：

$scope.items=[
            {prizeList:[{name:'电话费',src:'img/icon_funce.png',price:'12'},
                {name:'京东E卡',src:'img/icon_funce.png',price:'11'},
                {name:'Q币',src:'img/icon_funce.png',price:'15'}]},
            {prizeList:[{name:'空气净化器',src:'img/icon_funce.png',price:'1000'},
                {name:'电冰箱',src:'img/icon_funce.png',price:'700'}]}
    ]

效果如下，这里没个slide中限制的数量是3个：