标签：
基本思路
一开始页码为1，Service向服务器端获取对应信息；点击上/下一页/跳转，通过对应的页码向服务器端获取对应的信息。
由于后台暂时没弄好，我实现的过程中直接读取准备好的JSON文件，通过页码获取对应的信息段并通过ng-repeat在页面显示具体信息。
展示
一开始直接在Controller中实现分页的功能代码
HTML部分
1 <div class="pagination"> 2 <ul> 3 <li class="pagination-btn" ng-class="{true:‘active‘}[currentPage == page]" ng-repeat="page in pages" ng-click="selectPage(page)"> 4 {{page}} 5 </li> 6 <input class="pagination-input" ng-model="destPage"> 7 <li class="pagination-jmp" ng-click="skipPage()">跳转</li> 8 </ul> 9 <div class="pagination-btn-group"> 10 <div class="pagination-prev" ng-click="prevPage()" ng-class="{true:‘disabled‘}[currentPage == 1]"><上一页</div> 11 <div class="pagination-next" ng-click="nextPage()" ng-class="{true:‘disabled‘}[currentPage == endPage]">下一页></div> 12 </div> 13 </div>
ng-class="{true:‘active‘}[currentPage == page]" 表示当page为当前页面时应用.active的CSS样式
在angular中为我们提供了3种方案处理class：
1.scope变量绑定
如：<div class=”{{test}}”></div> 然后在Controller中设置$scope.test值，不推荐使用，Controller中应该放业务逻辑部分，Service与服务器交互，Directive与页面交互
2.字符串数组形式
形如：<div ng-class="{true: ‘active‘, false: ‘inactive‘}[expression]"> expression为true，则active；否则inactive
3.对象key/value处理
形如：<div ng-class {‘selected‘: isSelected, ‘car‘: isCar}"> isSelected为true，增加.selected样式；isCar为true，增加car样式
功能部分
1 $scope.loadPagination = function() { 2 $scope.pages = []; 3 var i,j; 4 5 if($scope.currentPage == "1..."){ 6 $scope.currentPage = 1; 7 }else if($scope.currentPage == "..." + $scope.endPage){ 8 $scope.currentPage = $scope.endPage; 9 } 10 11 if(($scope.endPage <= 5) || ($scope.currentPage <= 3)){ 12 $scope.pages[0] = 1; 13 for(i = 1;i < 5;i++){ 14 if(i == $scope.endPage) 15 break; 16 $scope.pages[i] = i + 1; 17 } 18 if(i < $scope.endPage){ 19 $scope.pages[4] = "..." + $scope.endPage; 20 } 21 }else if($scope.currentPage <= $scope.endPage-3){ 22 $scope.pages[0] = "1..."; 23 $scope.pages[1] = $scope.currentPage - 1; 24 $scope.pages[2] = $scope.currentPage; 25 $scope.pages[3] = $scope.currentPage + 1; 26 $scope.pages[4] = "..." + $scope.endPage; 27 }else{ 28 $scope.pages[0] = "1..."; 29 $scope.pages[1] = $scope.endPage - 3; 30 $scope.pages[2] = $scope.endPage - 2; 31 $scope.pages[3] = $scope.endPage - 1; 32 $scope.pages[4] = $scope.endPage; 33 } 34 35 var start=($scope.currentPage - 1) * $scope.pageSize; 36 var end=$scope.currentPage * $scope.pageSize; 37 $scope.dialogList = $scope.realDialogList.slice(start,end); 38 }; 39 40 $scope.prevPage = function() { 41 $scope.currentPage -= 1; 42 $scope.loadPagination(); 43 }; 44 45 $scope.nextPage = function() { 46 $scope.currentPage += 1; 47 $scope.loadPagination(); 48 }; 49 50 $scope.skipPage = function() { 51 var destPage=Number($scope.destPage); 52 $scope.destPage = ""; 53 if(isNaN(destPage) || destPage <= 0 || destPage > $scope.endPage){ 54 return ; 55 } 56 $scope.currentPage = destPage; 57 $scope.loadPagination(); 58 }; 59 60 $scope.selectPage = function(selected) { 61 $scope.currentPage=selected; 62 $scope.loadPagination(); 63 };
$scope.realDialogList为Service获取的JSON信息，$scope.dialogList为要展示在页面上的信息
这里关键就是loadPagination()，我的思路是设置5个按钮的分页，第一个按钮作为首页链接，最后一个按钮作为末页链接，剩下三个按钮，将当前页码设置为中间按钮 。
根据分页栏首/末页按钮数字分为三种状态：
1. 首页为‘1‘，此时 页码<=3 或 末页<=5，当末页>5时，设置为‘...X‘
2. 首页为‘1...‘，末页为‘...X‘，此时 页码<=末页-3
3. 首页位‘1...‘，末页为‘X‘，其他情况
推荐将分页写成Directive或Service
标签：
原文地址：http://www.cnblogs.com/cqq626/p/4446404.html
