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

先来看下效果图

实例代码

app。指令(' page paging '，函数(){ return { restrict : ' E '，template : ' div class=' paging-box ' ul class=' paging ' Li ng-class=' page。style ' ng-repeat=' page list ' a href=' { { page。链接} } ' { { page。name } }/a/Li/ulul class=' paging ' ng-if=' page list[0]' Li class=' page-count disabled ' span共{{ pageRecord }}条记录/共{{ pageCount }}页/span/li/ul/div '，替换：真的，作用域： { 'pageId' : '='，' pageRecord' : '='，' pageSize' : '='，' pageUrlTemplate' : '=' }，控制器： ['$scope '，函数($ scope){ $ scope。getlink=function(PageID){ return $ scope。PageURLtemplate。替换(' { PAGE } '，PAGEID)；};$ scope。get page list=function(){ var page=[]；var first page=ParSeint(($ scope。PageID-1)/$ scope ._页面大小)* $作用域_ PageSize 1；page.push({ name : '首页，style : $scope.pageId==1？已禁用":",链接：美元范围。getlink(1)})；page.push({ name : '上一页，style : $scope.pageId==1？已禁用":",链接：美元范围。getlink(1)})；for(var页面id=首页；第10页；页面id){ if(页面id=1页面id=$ scope。页数){ page。push({ name : page id，link : $scope.getLink(pageId)，style : page id==$ scope。页面id？active ' : ' ' })；} } page.push({ name : '下一页，样式：美元范围。页面id==$作用域。页数？已禁用":",链接：美元范围。getlink($ scope。页数)})；page.push({ name : '尾页，样式：美元范围。页面id==$作用域。页数？已禁用":",链接：美元范围。getlink($ scope。页数)})；返回页面；};$scope.pageInit=function(){ if(！$scope.pageId ||！$ scope。页面记录){ setTimeout(函数(){ $ scope .$ apply(function(){ $ scope。page init()；});}, 10);}else{ if(！$scope.pageSize ){ $scope ._ PageSize=ParSeint($作用域。页面大小)；}else{ $scope ._ pageSize=10} $作用域。PageID=ParSeint($作用域)。page id)；$ scope。页数=ParSeint(($ scope。页面记录-1)/$ scope ._ PageSize)1；if($ scope。页面id 1){ $ scope。页面id=1；} else if($ scope)。页面id $作用域。页数){ $ scope。页面id=$ scope。页数；} $ scope.pageLoad=true$ scope。页面列表=$ scope。get page list()；} };$ scope.pageLoad=false$ scope。page init()；}] }});调用代码：

页面-分页页面-id='页面id '页面-记录='记录计数'页面-网址-模板='网址模板'/页面-分页以上就是angular.js分页代码的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。