AngularJS和BootStrap模仿百度分页示例代码

模仿百度每页显示10条数据，实现了当前页面居中的算法。

！DOCTYPE html html head meta charset=' UTF-8 ' title bootstrap AngularJS分页显示/title脚本类型=' text/JavaScript ' src=' http :/js/jquery。js/'脚本脚本类型=' text/JavaScript ' src=' http :/js/bootstrapjs '/脚本链接rel='样式表href='./CSS/引导/引导。CSS ' rel='外部无跟随'/脚本类型=' text/JavaScript ' src=' http :/js/angular。量滴js '/script/head body ng-app='分页app ' ng-controller='分页ctrl ' table class=' table table-bordered ' tr th序号/th商品编号/th名称/th价格/th/tr ng-repeat=' products in products ' TD { { $ index 1 } }/TD TD TD { { product }。id } }/TD { { product }。名称} }/TD { {产品。价格} }/TD/tr/table div ul class='分页向右拉'阿利href-click=' prev()'上一页/a/Li Li ng-repeat='页面列表中的页面ng-class=' { active : isaactivepage(page)} ' a href ng-click=' select page(page)' { { page } }/a/Li阿利href ng-click='next()'下一页/a /li /ul /div /body脚本类型=' text/JavaScript ' var分页app=angular。模块('分页app '，[])；分页应用。控制器('分页ctrl '，['$scope '，' $http '，函数($scope，$http) {！[现的效果](实现的效果1.jpg)！[现的效果](实现的效果1.jpg)//分页组件必须变量$ scope。current page=1；//当前页（请求数据)$ scope。页面大小=4；//每页记录数（请求数据)$ scope。总计数=0；//总记录数（响应数据)$ scope。total Pages=0；//总页数（根据总记录数、每页记录数计算) //要在分页工具条显示所有页码$ scope。页面列表=新数组()；//加载上一页数据$ scope。prev=function(){ $ scope。selectpage($ scope。current page-1)；} //加载下一页数据$ scope。next=function(){ $ scope。selectpage($ scope。当前页面1)；} //加载指定页数据$scope.selectPage=函数（页){ //页超出范围if($scope.totalPages！=0(第1页| |第$页范围。总页数)){ return} $http({ method: 'GET '，url: '6_' page ' .json '，params: { 'page' : page，//页码page SiZe ' : $作用域。page SiZe//每页记录数} }).成功（函数（数据、状态、标题、配置){ //显示表格数据$ scope。产品=数据。产品；//根据总记录数计算总页数$ scope。总计数=数据。总计数；$ scope。总页数=数学。天花板(范围)。总计数/$ scope。页面大小)；//更新当前显示页码$ scope.currentPage=page//显示分页工具条中页码var begin//显示第一个页码定义变量结束；//显示最后一个页码//理论上开始是当前页-5 begin=$ scope。current page-5；if(begin 1){ //第一个页码不能小于1 begin=1} //显示10个页码，理论上目标是开始9结束=开始9;if(end $scope.totalPages ){//最后一个页码不能大于总页数end=$ scope.totalPages} //修正开始的值，理论上开始是end - 9开始=end-9；if(begin 1){ //第一个页码不能小于1 begin=1} //要在分页工具条显示所有页码$ scope。页面列表=新数组()；//将页码加入页面列表集合for(var I=begin；i=结束；I){ $ scope。页面列表。推(我)；} }).错误（函数（数据、状态、标题、配置){ //当响应以错误状态返回时调用警报('出错，请联系管理员');});} //判断是否为当前页$ scope。isaactivepage=function(page){ return page==$ scope。当前页面；} //初始化，选中第一页$ scope。选择页面(1)；} ]);/script/html1_1.json

{ '总计数' :100，'产品' : [{'id' :' 1001 '，'名称' : '苹果手机'，'价格' :' 5000'}，{'id' :' 1002。

{ '总计数' :100，'产品' : [{'id' :' 1001 '，'名称' : '华为手机'，'价格' :' 5000'}，{'id' :' 1002。

下面的代码问题：如果你不小心把begin写成0，会有一个从0开始的错误出现在页码上

//将页码添加到为(var i=begini=结束；I){ $ scope . page list . push(I)；}如下图所示

原因是begin代表页面上显示的第一个页码。如果我从0开始遍历，那么pageList数组中的第一个元素就是0，所以在下面遍历angularJS的页码的过程中，它会从0开始遍历。在页面上，它将从0开始显示

Li ng-repeat=' page list中的页面' ng-class=' {active :是活动页面(page)}' a href ng-click='选择页面(page)' {{page}}/a/li以上是本文的全部内容。希望对大家的学习有帮助，支持我们。