基于angularjs的单页面实例_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();

}]

}

});

调用代码：

page-id="pageId"

page-record="recordCount"

page-url-template="urlTemplate">

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