【AngularJS】用angular的指令实现页码组件

最新推荐文章于 2019-07-29 16:12:43 发布

原创最新推荐文章于 2019-07-29 16:12:43 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

AngularJS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种自定义Angular分页指令的方法，该指令能够根据当前页码和总页数动态更新显示的页码范围，并提供了跳转到指定页码的功能。

前一阵子，在angular的项目里需要用到页码，虽然找了很多，页码实现的源码。但都不能很好地解决我的需求。

于是，干脆乎，自己写一个页码指令。

hjcr.directive('pagination',function(){
  return{
    restrict:'E',
    scope:{
      currentPage:'=',
      totalPage:'=',
      getRecord:'&'
    },
    link:function($scope,element,attrs){
    },
    controller:function($scope, $element, $attrs){
      $scope.index = 0;
      $scope.pages =[];
      $scope.$watch('totalPage',function(){
        if($scope.totalPage<=5){
          for (var i = 0; i < $scope.totalPage; i++) {
            $scope.pages[i] = i+1;
          }
        }
        $scope.$watch('index',function(){
          if($scope.totalPage>5){
            for (var i = 0; i < 5; i++) {
              $scope.pages[i] = $scope.index+i+1;
            }
          }
        })
      });
      $scope.$watch('currentPage',function(newValue, oldValue){
        $scope.currentPage = newValue;
        if(newValue!=oldValue){
          $scope.getRecord();
        }
      });
      $scope.prev = function(){
        if($scope.currentPage>1){
          $scope.currentPage--;
          if($scope.pages[0]!=1)
          {$scope.index--;}
        }
      }
      $scope.next = function(){
        if ($scope.currentPage<$scope.totalPage) {
          $scope.currentPage++;
          if($scope.pages[4] != $scope.totalPage)
          {$scope.index++;}
        }
      }
      $scope.toFirst = function(){$scope.currentPage = 1;$scope.index=0;}
      $scope.toEnd = function(){$scope.currentPage = $scope.totalPage;$scope.index=$scope.totalPage-5;}
      $scope.prevSize = function(){
        if($scope.pages[0]-5<1){
          $scope.index = 0;
          $scope.currentPage = $scope.index+3;
        }
        else {
          $scope.index = $scope.pages[0]-6;
          $scope.currentPage = $scope.currentPage-5;
        }
      }
      $scope.nextSize = function(){
        if ($scope.pages[4]+5>$scope.totalPage) {
          $scope.index = $scope.totalPage-5;
          $scope.currentPage = $scope.index+3;
        }
        else {
          $scope.index = $scope.pages[0]+4;
          $scope.currentPage = $scope.currentPage+5;
        }
      }
      $scope.jump = function(page){
        $scope.currentPage = page;
      }
    },
    template:
      '<ul  class="pagination" style="margin-top:20px;">'+
        '<li ng-click="toFirst()" ng-class="currentPage===1?\'disabled\':\'\'"><a>首页</a></li>'+
        '<li ng-show="totalPage>5" ng-click="prevSize()" ng-class="pages[0]===1?\'disabled\':\'\'"><a><i class="fa fa-backward"></i></a></li>'+
        '<li ng-click="prev()" ng-class="currentPage===1?\'disabled\':\'\'"><a><i class="fa fa-chevron-left"></i></a></li>'+
        '<li ng-click="jump(page)" ng-class="currentPage==page?\'active\':\'\'" ng-repeat="page in pages"><a>{{page}}</a></li>'+
        '<li ng-click="next()" ng-class="currentPage===totalPage?\'disabled\':\'\'"><a><i class="fa fa-chevron-right"></i></a></li>'+
        '<li ng-show="totalPage>5" ng-click="nextSize()" ng-class="pages[4]===totalPage?\'disabled\':\'\'"><a><i class="fa fa-forward"></i></a></li>'+
        '<li ng-click="toEnd()" ng-class="currentPage===totalPage?\'disabled\':\'\'"><a>尾页</a></li>'+
      '</ul>'
  }
});

使用如下

<pagination ng-if="totalPage>1" current-page="currentPage" total-page="totalPage" get-record="getRecord()">
</pagination>

传入三个参数：当前页码，总页数，调用页码的函数