用AngularJS创建分页(转自前端乱炖）

在编写普通网页或者web应用时，一个最普遍的需求就是创建分页。分页这个词乍一听上去可能有些陌生，但是你肯定每天都在用，它就是你在浏览新闻时最下边显示你已经看到第几页，同时跳转到具体某一页，首页或者末页的那个东西。这个当然不是什么很难的需求，实现它的方式多种多样，从前端到后端都可以有具体的实现方法。借助AngularJS，你可以使用几个简单的指令和过滤器（filter）来实现它。

我们下面先来看代码，然后再来讲述其中的一些关键点：

<div ng-controller="PaginationCtrl"> 
    <table class="table table-striped">
        <thead> 
             <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Description</th> 
             </tr>
        </thead>
        <tbody>
         <tr ng-repeat="item in items | offset: currentPage*itemsPerPage | limitTo: itemsPerPage">             <td>`item`.`id`</td> 
             <td>`item`.`name`</td>
              <td>`item`.`description`</td>
          </tr> 
          </tbody>
          <tfoot>
              <td colspan="3">
              <div class="pagination"> 
                  <ul>
                      <li ng-class="prevPageDisabled()"><a href ng-click="prevPage()">  Prev</a>
                      </li>
                      <li ng-repeat="n in range()"ng-class="{active: n == currentPage}"                                     ng-click="setPage(n)">
                          <a href="#">{{n+1}}</a> 
                      </li>
                      <li ng-class="nextPageDisabled()"><a href ng-click="nextPage()">Next </a>
                      </li> 
                  </ul>
              </div> 
              </td>
          </tfoot>
       </table>
</div>

上面的代码很好理解，我们看到我们首先使用ng-controller声明了一个控制器PaginationCtrl，然后在其中还是用了ng-class，ng-click指令，ng-click指令很好理解，绑定了它的DOM元素一旦被点击就会执行scope中的一串代码，一般来说是执行一个函数。而ng-class则会实时更新绑定了它的DOM元素的类。还有一点需要注意的是我们再次使用了一个叫做offset的过滤器，它的作用是截取需要显示的条目，它带有一个参数，我们将在后面具体看到它的实现方式。

app.filter('offset', function() { 
    return function(input, start) {
        start = parseInt(start, 10);
        return input.slice(start); 
        };
  });

如果你不太记得AngularJS中的过滤器怎么写，我们现在就来简单的复习一下。AngularJS的过滤器需要返回一个函数，这个函数接收至少一个参数，它的第一个参数是需要过滤的值本身，如果是单个变量，那就是单个变量。如果是在ng-repeat指令中，它指的是整个数组，而不是数组的每一项。在这里，我们的offset是放在ng-repeat中使用的，因此它需要处理的input是整个数组。

下面我们需要定义一个控制器PaginationCtrl来管理实际的$scope.items数组，同时处理启用/禁用分页按钮的逻辑，代码如下：

app.controller("PaginationCtrl", function($scope) {
    $scope.itemsPerPage = 5;
    $scope.currentPage = 0; 
    $scope.items = [];
    for (var i=0; i<50; i++) {
        $scope.items.push({id: i, name: "name "+ i, description: "description " + i });
    }
    $scope.prevPage = function() { 
        if ($scope.currentPage > 0) {
            $scope.currentPage--; 
        }
    };
    $scope.prevPageDisabled = function() {
        return $scope.currentPage === 0 ? "disabled" : "";
    };
    $scope.pageCount = function() {
        return Math.ceil($scope.items.length/$scope.itemsPerPage)-1;
    };
    $scope.nextPage = function() {
        if ($scope.currentPage < $scope.pageCount()) {
            $scope.currentPage++;
         }
    };
   $scope.nextPageDisabled = function() {
        return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
    }

到目前为止，使用AngularJS创建一个分页的代码已经完成了。总结一下，其实分页的思想很简单，首先我们的items是完全载入页面的，其次，我们使用了一个过滤器来将items数组从当前需要显示的第一个项目截断到最后，同时使用AngularJS内建的过滤器limitTo来限制显示的条目。另外，我们在这里还是用了ng-class指令，来启用/禁用第一页和最后一页的按钮。