image.png

image.png

1、数据处理
.总数据
$scope.commss = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29];
.每页个数$scope.views = 9;
.当前页$scope.currView = 1;
.总页数$scope.allView = Math.ceil($scope.commss.length/$scope.views);
.数据截取位置$scope.viewStart = ($scope.currView -1)*$scope.views;
.页面应展示的数据$scope.comms = $scope.commss.slice($scope.viewStart,$scope.viewStart+$scope.views);
2、页面展示

<ion-header-bar class="bar bar-header bar-stable" align-title="center">
    <div class="buttons">
      <button class="button button-positive button-clear icon-left icon ion-ios-arrow-back" ng-click="backLearn(0)">返回</button>
    </div>
    <h1 class="title">选择命令</h1>
    <div class="buttons">
      <button class="button button-positive button-clear" ng-click="backLearn(1)">确定</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <li class="item item-checkbox" ng-repeat="(k,comm) in comms">
        <div style="float:right">
          <i >{{comm}}</i>
        </div>
        <label class="checkbox checkbox-stable">
          <input type="checkbox" ng-model="" ng-checked="" ng-change="">
        </label>
      </li>

    </ion-list>
  </ion-content>
  <div class="bar bar-footer bar-stable">
    <button class="button button-clear button-positive" ng-click="preView()">上一页</button>
    <div class="title">共{{allView}}页/第{{view}}页</div>
    <button class="button button-clear button-positive" ng-click="nextView()">下一页</button>
  </div>```
3、上下页方法
.上一页
``$scope.preView = function(){
      if($scope.view == 1){
        return;
      }else{
        $scope.view = $scope.view - 1;
        $scope.viewStart = ($scope.view-1)*$scope.views;
        $scope.comms =   
 $scope.commss.slice($scope.viewStart,$scope.viewStart+$scope.views);
      }
    }``
.下一页
``$scope.nextView = function(){
      if($scope.view == $scope.allView){
        return;
      }else{
        $scope.view = $scope.view + 1;
        $scope.viewStart = ($scope.view-1)*$scope.views;
        $scope.comms = $scope.commss.slice($scope.viewStart,$scope.viewStart+$scope.views);
      }
    }``