ionic——简单的item分页

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);
      }
    }``
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,647评论 0 3
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,782评论 1 21
  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 12,774评论 0 33
  • 我的学习生活是充实的。早上早早地起床朗读,在教室里,看不到一张疲倦的面容,我们都热情高昂地朗读着。听课时,我们认真...
    01cbf6f8ccf2阅读 3,282评论 1 16
  • 又进入了大学一年一度的考试月。 大学的基本节奏就是:前三个月如果你想,你可以随心所欲的玩,但最后一个月...
    三念阅读 420评论 6 1