对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 HTML代码中加入 标签即可调用。

先来看下效果图

实例代码

  $scope.getLink = function(pageId){
    return $scope.pageUrlTemplate.replace("{PAGE}",pageId);
  };

  $scope.getPageList = function(){
    var page = [];
    var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
    page.push({
      name  : '<a href="https://www.jb51.cc/tag/shouye/" target="_blank" class="keywords">首页</a>',style  : $scope.pageId == 1 ? "disabled" : "",link  : $scope.getLink(1)
    });
    page.push({
      name  : '<a href="https://www.jb51.cc/tag/shangyiye/" target="_blank" class="keywords">上一页</a>',link  : $scope.getLink(1)
    });
    for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
      if( pageId >= 1 && pageId <= $scope.pageCount ){
        page.push({
          name  : pageId,link  : $scope.getLink(pageId),style  : pageId == $scope.pageId ? "active" : ""
        });
      }
    }
    page.push({
      name  : '<a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a>',style  : $scope.pageId == $scope.pageCount ? "disabled" : "",link  : $scope.getLink($scope.pageCount)
    });
    page.push({
      name  : '尾页',link  : $scope.getLink($scope.pageCount)
    });
    return page;
  };

  $scope.pageInit = function(){
    if( !$scope.pageId || !$scope.pageRecord ){
      setTimeout(function(){
        $scope.$apply(function(){
          $scope.pageInit();
        });
      },10);
    }else{
      if( !!$scope.pageSize ){
        $scope._pageSize = parseInt($scope.pageSize);
      }else{
        $scope._pageSize = 10;
      }
      $scope.pageId    = parseInt($scope.pageId);
      $scope.pageCount  = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
      if( $scope.pageId < 1 ){
        $scope.pageId = 1;
      }else if( $scope.pageId > $scope.pageCount ){
        $scope.pageId = $scope.pageCount;
      }
      $scope.pageLoad   = true;
      $scope.pageList   = $scope.getPageList();
    }
  };

  $scope.pageLoad = false;
  $scope.pageInit();
}]

}
});