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

本文介绍了一种自定义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>


传入三个参数:当前页码,总页数,调用页码的函数

 


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值