对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 HTML代码中加入 标签即可调用。
先来看下效果图
实例代码
rush:js;">
app.directive('pagePagination',function(){
return {
restrict : 'E',template : '',replace : true,scope : {
"pageId" : "=","pageRecord" : "=","pageSize" : "=","pageUrlTemplate" : "="
},controller : ['$scope',function($scope){
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getLink = function(pageId){
return $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageUrlTemplate.replace("{PAGE}",pageId);
};
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.get<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a> = function(){
var page = [];
var f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tPage = parseInt(( $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId - 1 ) / $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e._pageSize ) * $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e._pageSize + 1;
page.push({
name : '<a href="https://www.jb51.cc/tag/shouye/" target="_blank" class="keywords">首页</a>',style : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId == 1 ? "<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled" : "",link : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getLink(1)
});
page.push({
name : '<a href="https://www.jb51.cc/tag/shangyiye/" target="_blank" class="keywords">上一页</a>',link : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getLink(1)
});
for( var pageId = f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tPage; pageId < firstPage + 10; pageId ++){
if( pageId >= 1 && pageId <= $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageCount ){
page.push({
name : pageId,link : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getLink(pageId),style : pageId == $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId ? "active" : ""
});
}
}
page.push({
name : '<a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a>',style : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId == $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageCount ? "<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled" : "",link : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getLink($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageCount)
});
page.push({
name : '尾页',link : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getLink($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageCount)
});
return page;
};
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageInit = function(){
if( !$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId || !$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageRecord ){
setTimeout(function(){
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(function(){
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageInit();
});
},10);
}else{
if( !!$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageSize ){
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e._pageSize = parseInt($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageSize);
}else{
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e._pageSize = 10;
}
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId = parseInt($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId);
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageCount = parseInt(( $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageRecord - 1 ) / $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e._pageSize ) + 1;
if( $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId < 1 ){
$scope.pageId = 1;
}else if( $scope.pageId > $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageCount ){
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageId = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageCount;
}
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageLoad = true;
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a> = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.get<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a>();
}
};
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageLoad = false;
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pageInit();
}]}
});
调用代码：
rush:xhtml;">
以上就是angular.js分页代码的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
