angularjs实现的前端分页控件示例

前言：之前写个一个jQuery的分页显示插件，存在许多的bug，现在由于业务需要，学习的一点AngularJS，重新用angularjs实现了这个分页插件

实现效果图：

（效果图是加上了bootstrap的css文件）

用法：

angular-pagination.js代码：

rush:js;"> /** * angularjs分页控件 * Created by CHEN on 2016/11/1. */

angular.module('myModule',[]).directive('myPagination',function () {
return {
restrict: 'EA',replace: true,scope: {
option: '=pageOption'
},template: '<ul class="pagination">' +
'<li ng-click="pageClick(p)" ng-repeat="p in page" class="{{option.curr==p?\'active\':\'\'}}">' +
'{{p}}' +
'' +
'',link: function ($scope) {
//容错处理
if (!$scope.option.curr || isNaN($scope.option.curr) || $scope.option.curr < 1) $scope.option.curr = 1;
if (!$scope.option.all || isNaN($scope.option.all) || $scope.option.all < 1) $scope.option.all = 1;
if ($scope.option.curr > $scope.option.all) $scope.option.curr = $scope.option.all;
if (!$scope.option.count || isNaN($scope.option.count) || $scope.option.count < 1) $scope.option.count = 10;

  //得到<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>页数的数组
  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page = getRange($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.curr,$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.all,$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.count);

  //绑定点击事件
  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageClick = function (page) {
    if (page == '&laquo;') {
      page = parseInt($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.curr) - 1;
    } else if (page == '&raquo;') {
      page = parseInt($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.curr) + 1;
    }
    if (page < 1) page = 1;
    else if (page > $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.all) page = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.all;
    //点击相同的页数 不执行点击事件
    if (page == $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.curr) return;
    if ($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.click && typeof $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.click === 'function') {
      $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.click(page);
      $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.curr = page;
      $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page = getRange($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.curr,$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.option.count);
    }
  };

  //返回页数范围（用来遍历）
  function getRange(curr,all,count) {
    //计算<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>的页数
    curr = parseInt(curr);
    all = parseInt(all);
    count = parseInt(count);
    var from = curr - parseInt(count / 2);
    var to = curr + parseInt(count / 2) + (count % 2) - 1;
    //<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>的页数容处理
    if (from <= 0) {
      from = 1;
      to = from + count - 1;
      if (to > all) {
        to = all;
      }
    }
    if (to > all) {
      to = all;
      from = to - count + 1;
      if (from <= 0) {
        from = 1;
      }
    }
    var range = [];
    for (var i = from; i <= to; i++) {
      range.push(i);
    }
    range.push('&raquo;');
    range.unshift('&laquo;');
    return range;
  }

}

}
});

index.HTML代码：

rush:xhtml;"> <Meta charset="UTF-8">