对于大多数网应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示。

页面展示效果：

页面超文本标记语言代码：

table class=' table table-striped ' style=' margin : 0px；'任务描述和tr td选择运输署/运输署企业名称运输署/运输署企业地址运输署/运输署状态/td /tr /thead tbody tr ng-repeat='列表中的l ' t输入类型=' radio ' name=' id ' ng-click=' select(l . id)' value=' { { l . id } } '//TD { { l . name } }/TD { { l . address } }/TD TD { { l . status _ str } }/TD/tr/t body/table！-paging-ul class=' paging ' style=' margin : 0px；'Li ng-class=' { true : ' disabled ' }[p _ current==1]' a href=' JavaScript : void(0)；'ng-click='p_index()'首页/a/Li Li ng-repeat=' page in pages ' ng-class=' { true : ' active ' }[p _ current==page]' a href=' JavaScript : void(0)；'ng-click=' load _ page(page)' { { page } }/a/Li Li ng-class=' { true : ' disabled ' }[p _ current==p _ all _ page]' a href=' JavaScript : void(0)；'ng-click='p_last()'尾页/a/li /ul span style='垂直对齐' : 12px'共：{{count}}条/span Js代码：

var app=angular.module('myApp '，[])；app.controller('map_ctrl '，函数($scope，$http，$location){ //配置$ scope。计数=0；$ scope.p _ pernum=10/变量$ scope。p _ current=1；$ scope。p _ all _ page=0；$ scope。pages=[]；//初始化第一页_get($scope.p_current，$scope.p_pernum，function(){ alert('我是第一次加载');});//获取数据var _get=函数（页面、大小、回调){ $http.get('xxx.html？status=0page=' page 'size=' size ').成功(函数(RES){ if(RES RES . status==1){ $ scope。计数=RES .计数；$ scope。list=RES . list$ scope.p _ current=page$ scope。p _ all _ page=数学。天花板(范围)。count/$ scope。p _ pernum)；reloadPno()；回调();}else{ alert('加载失败');} });} //单选按钮选中$ scope。select=function(id){ alert(id)；} //首页$ scope。p _ index=function(){ $ scope。load _ page(1)；} //尾页$ scope。p _ last=function(){ $ scope。load _ page($作用域。p _ all _ page)；} //加载某一页$ scope。load _ page=function(page){ _ get(page，$scope.p_pernum，function(){ })；};//初始化页码var reloadPno=function(){ $ scope。pages=计算索引($ scope)。p _ current，$scope.p_all_page，8)；};//分页算法var计算索引=函数(当前、长度、显示长度){ var indexes=[]；var start=数学。圆形(当前显示长度/2)；var end=Math.round(当前显示长度/2);if(start=1){ start=1；end=开始显示长度-1；if(end=length-1){ end=length-1；} } if(end=length-1){ end=length；开始=结束-显示长度1;if(start=1){ start=1；} } for(var I=start；i=结束；I){索引。推(我)；}返回索引；};});分页算法：

当前：当前页码，长度：总页码，显示长度：显示长度@返回数组[1,2,3,4,5,6,7,8]

var计算索引=函数(当前、长度、显示长度){ var indexes=[]；var start=数学。圆形(当前显示长度/2)；var end=Math.round(当前显示长度/2);if(start=1){ start=1；end=开始显示长度-1；if(end=length-1){ end=length-1；} } if(end=length-1){ end=length；开始=结束-显示长度1;if(start=1){ start=1；} } for(var I=start；i=结束；I){索引。推(我)；}返回索引；};以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。