angular.js分页代码的实例

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

先来看下效果图

实例代码

app.directive('pagePagination', function(){
  return {
    restrict : 'E',
    template : '
{{ page.name }}
共 {{ pageRecord }} 条记录 / 共 {{ pageCount }} 页
',
    replace : true,
    scope : {
      "pageId"      : "=",
      "pageRecord"    : "=",
      "pageSize"     : "=",
      "pageUrlTemplate"  : "="
    },
    controller : ['$scope', function($scope){

      $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  : '首页',
   style  : $scope.pageId == 1 ? "disabled" : "",
   link  : $scope.getlink(1)
 });
 page.push({
   name  : '上一页',
   style  : $scope.pageId == 1 ? "disabled" : "",
   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  : '下一页',
   style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
   link  : $scope.getlink($scope.pageCount)
 });
 page.push({
   name  : '尾页',
   style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
   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();
    }]
  }
});

调用代码：

以上就是angular.js分页代码的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。