（首先声明本文来自博客园本人原创，转载请说明出处。欢迎关注：http://www.cnblogs.com/mazhaokeng/p/6752990.html）
之前网站的后台管理为了图快，把Jquery写的前台页面使用的分页插件，套到Angular中使用。现在后台的小编说这东西有时候翻页失败，而插件代码十分复杂，无法定位bug进行修改，也无法保证修改后不会出现别的bug，干脆舍弃插件，自己写一个。
设计时，我大概看了一下插件的代码，基本思路就是通过数据处理判断，然后通过字符串拼接，生成新的dom元素。而我们需要的分页是在Angular中运行，应当尽量避免这种做法。怎么简单怎么来，我们固定一次只显示7个页码，不需要动态增删元素。
<ul>
<li ng-repeat="num in pageShowList">
<a href="javascript:void(0)">
{{num}}
</a>
</li>
</ul>
pageShowList是要显示的7个页码，元素是固定的，但里面的数字会变化。我们把这7个页码设计成一个“展示窗口”，用于展示“全部页码”的一部分。在页码被点击时会移动，然后把点击的页码放到中间，这就是我们想要的效果。假如我们总共有12页，初始化时我们显示的是1-7页。
总页数： 1 2 3 4 5 6 7 8 9 10 11 12
展示窗口： 1 2 3 4 5 6 7
这总页数和展示都需要生成一个数组。首先总页数生成很简单，从1开始到最大页数位置push数字进去就行了。
/* 设定最大页数
* */
function setPageMax(num) {
maxPage = num; //保存最大页数
for (var i = 1; i <= num; i++) {
pageList.push(i); //生成数组
}
$scope.pageShowList = pageList.slice(0, 7); //显示窗口数组，只显总页数中的其中7个
}
这样就生成了我们需要的页码。接下来是点击时窗口的移动。
我们为页码的a标签绑定一个点击事件，ng-click="pageGo(num)"，num就是窗口中的数字。点击事件pageGo需要调用下面的代码重新排列显示的页码：
/* 重新设置页码
* */
function resetPageOrder(num) {
if( num > 4 ){
$scope.pageShowList = [ //重新排列窗口的
num - 3,
num - 2,
num - 1,
num,
num + 1,
num + 2,
num + 3
];
}else{
$scope.pageShowList = pageList.slice(0, 7); //显示1-7
}
}
思路很简单，就是点击不超过显示窗口中点的数字1-4时，窗口不移动（没有小于1的页数），而点击大于4的数字时，比如5，我们就把5放窗口中间，它的分别两边就是2、3、4和6、7、8。我们依次递增点击页码，窗口就往右移动了。
总页数： 1 2 3 4 5 6 7 8 9 10 11 12
展示窗口： 2 3 4 5 6 7 8
展示窗口： 3 4 5 6 7 8 9
然后我们发现，当点击页码越来越大，很快窗口右边就会超出总页数。这时我们只要把超出的部分去除掉就可以了。对展示窗口数组的处理就是把大于总页数12的元素pop掉。
总页数： 1 2 3 4 5 6 7 8 9 10 11 12
展示窗口： 8 9 10 11 12 13
展示窗口： 9 10 11 12 13 14
/* 重新设置页码
* */
function resetPageOrder(num) {if (num > 4 ) {
$scope.pageShowList = [
num - 3,
num - 2,
num - 1,
num,
num + 1,
num + 2,
num + 3
];
if ( num > maxPage - 3 ){ //窗口中点右边长度为3，如果超出了总页数
for ( var i = 0; i < 3-(maxPage - num); i ++ ){ //根据超出长度的个数，把显示窗口数组右边pop掉。
$scope.pageShowList.pop();
}
}
} else{ //
$scope.pageShowList = pageList.slice(0, 7); //1-7
}
}
这样就得到我们想要的效果：
最后总结一下，程序的思想就是，把要全部的页码生成出来，再制作一个与html绑定的展示窗口显示全部页码的一部分，点击时把点击的页码放在窗口的中间。窗口移动的过程中会遇到下面的三种情况：
（1）点击页码小于窗口中点，此时窗口不移动。
（2）点击页码大于窗口中点，窗口往右移动。
（3）窗口右边超出总页数，此时需要把超出部分剔除掉。
经过进一步的美化加工，就可以达到下面的效果了。我认为我们不能一遇上比较困难的逻辑时，就想要找各种插件。能不能自己思考一下，用简单的方法实现，再在此基础上进行加强，这才是程序员的核心能力。想要成为大牛，肯定不能只停留在使用*的阶段，*太复杂，我们就造一个小的用着先嘛。
最终代码整理：
//变量
var pageList = [];
$scope.page = 1; //初始默认为第一页
$scope.pageShowList = []; //最大显示7个格子 /* 监听最大页数，如果页数变化，重新生成页数数组
* */
var watch = $scope.$watch('maxPage', function (newValue, oldValue, scope) {
pageList = [];
for (var i = 1; i <= newValue; i++) { //一个个压入页码
pageList.push(i);
}
resetPageOrder($scope.page);
}); /* 直接跳页
* */
$scope.pageGo = function (num) {
$scope.page = num;
resetPageOrder($scope.page);
}; /* 上一页
* */
$scope.pagePre = function () {
if( $scope.page > 1){
$scope.page --;
resetPageOrder($scope.page);
}
}; /* 下一页
* */
$scope.pageNext = function () {
if ( $scope.page < $scope.maxPage ){
$scope.page ++;
resetPageOrder($scope.page);
}
}; /* 重新设置页码
* @param num当前页码
* */
function resetPageOrder(num) {
$scope.clickPage = num; //变色
if (num > 4 ) {
$scope.pageShowList = [
num - 3,
num - 2,
num - 1,
num,
num + 1,
num + 2,
num + 3
];
if ( num > $scope.maxPage - 3 ){ //去除多出的页数
for ( var i = 0; i < 3-($scope.maxPage - num); i ++ ){
$scope.pageShowList.pop();
}
}
} else{ //点击小于4的页数
$scope.pageShowList = pageList.slice(0, 7); //只显示最大7个
}
}