AngularJS分页实现

浏览数：35 / 时间：2015年06月09日

基本思路

一开始页码为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]">&lt;上一页</div>
11     <div class="pagination-next" ng-click="nextPage()" ng-class="{true:‘disabled‘}[currentPage == endPage]">下一页&gt;</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 };