angular.js分页代码的实例
时间：2021-04-06 10:02:59|栏目：AngularJS|点击： 次
对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 html代码中加入 标签即可调用。
先来看下效果图
实例代码
app.directive('pagePagination', function(){
return {
restrict : 'E',
template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>',
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-pagination page-id="pageId" page-record="recordCount" page-url-template="urlTemplate"> </page-pagination>
栏 目：AngularJS
下一篇：浅谈angular.js中实现双向绑定的方法$watch $digest $apply
本文标题：angular.js分页代码的实例
本文地址：http://www.codeinn.net/misctech/95805.html
