angularjs分页

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

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

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

 
    
         
             
                 Id
                 Name
                 Description 
             
        
        
                      `item`.`id` 
             `item`.`name`
              `item`.`description`
           
          
          
              
               
                  

                        Prev
                      
                      
                          {{n+1}} 
                      
                      Next 
                       
                  
              

                                   

上面的代码很好理解，我们看到我们首先使用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指令，来启用/禁用第一页和最后一页的按钮。