AngularJS自发布以来就被越来越多的开发者使用，这也说明大部分前端朋友都转向了这里。毕竟是谷歌生产的产品，所以他们最近在学习这部分知识。

利用AngularJS Bootstrap实现表分页；

最近一直在学习Angular.js，在学习的过程中练习了很多Demo。在这里，我先贴一张表格页。

先看上图的最终结果：

不得不说Angular.js代码风格非常流行，几十行代码清晰简洁地实现了上述功能。

首先，表的数据源来自，Server.js点击下载。获取数据并在页面中显示。

1.表格由ng-repeat显示，代码如下：

table class=' table table-bordered ' tr thindex/th ng-repeat='(x，Y)in items[0]' { { x } }/th/tr tr ng-repeat=' x in items ' TD { $ index 1 } }/TD TD ng-bind=' x . name '/TD TD TD ng-bind=' x . city '/TD TD ng-bind='。表的列标题是从数据源(json)的第一行循环获取的键值。当然，如果Bootstrap想要指定表的类是表边界的。

2.分页也使用ng-repeat，这是一个常见的指令。寻呼代码如下：

navul class=' paging '阿利ng-click=' previous()' span上一页/span/A/Li ng-repeat=' page list中的页面' ng-class=' {active :是活动页面(page)} A ng-click='选择页面(page)' {{page}}/a/Li阿利ng-click=' next()' span下一页/span /a /li /ul/nav此处使用了ng-click事件命令。还使用了ng类指令

ng-class=' { active : ISactivepage(page)} '

上面的代码用于分页选定的样式。

这个表加分页是假分页，从后端取一次数据，通过不同的分页显示json的过滤数据。

特定代码注释：

！-新引导程序核心半铸钢钢性铸铁(铸造半钢)文件- link rel='样式表href=' http://应用程序。bdimg。com/libs/bootstrap/3。3 .4/CSS/bootstrap。量滴' CSS '样式# DivMain { width : 500 pxmargin: 0自动边距-top : 100 px；}导航{位置：相对宽度：100%;高度： 50px} .分页{ right: 0px绝对位置：top :-30px；} nav li { cursor:指针；}/style div id=' div main ' ng-app=' myApp ' ng-controller=' myCtrl ' table class=' table-bordered ' tr thin dex/th ng-repeat='(x，y)in items[0]' { { x } }/th/tr ng-repeat=' x in items ' TD { $ index 1 } }/TD TD ng-bind=' x . Name '/TD TD TD ng-bind=' x . City '/TD TD TD ng-bind=' x . Country '/TD/TD上一页/span/a/Li ng-repeat='页面列表中的页面ng-class=' { active : isaactivepage(page)} ' a ng-click=' select page(page)' { { page } }/a/Li阿利ng-click='Next()' span下一页/span/a/Li/ul/nav/div脚本src=' http :http://apps。 bdimg。com/libs/angular。js/1。5 .0-beta。0/角度。js '/script脚本类型=' text/JavaScript ' var app=angular。模块(' myApp '，[])；app.controller('myCtrl '，function ($scope，$http) { $http.get('Service.js ').然后（函数（响应){ //数据源$ scope。数据=响应。数据。记录；//分页总数$ scope。page SiZe=5；$ scope。pages=数学。天花板(范围)。数据。长度/$范围。页面大小)；//分页数$scope.newPages=$scope.pages 5？5 :美元scope.pages $ scope。页面列表=[]；$ scope。sel page=1；//设置表格数据源（分页)$ scope。setdata=function(){ $ scope。items=$ scope。数据。切片(($ scope。页面大小*(范围。sel page-1))，($ scope。出售页面* $范围。页面大小))；//通过当前页数筛选出表格当前显示数据} $ scope。items=$ scope。数据。切片(0，$ scope。页面大小)；//分页要重复的数组for(var I=0；i $ scope.newPagesI){ $ scope。页面列表。推(I 1)；} //打印当前选中页索引$ scope。selectpage=function(page){//不能小于一大于最大if(第1页||第$scope.pages页)返回；//最多显示分页数5 if(第2页){ //因为只显示5个页数，大于2页开始分页转换var新页面列表=[]；对于(var i=(第3页);一(第2页)$scope.pages？$ scope.pages :(第2页));I){新页面列表。推(I 1)；} $ scope。页面列表=新页面列表；} $ scope.selPage=page$ scope。setdata()；$ scope。isaactivepage(页面)；console.log('选择的页：' '页);};//设置当前选中页样式$ scope。isaactivepage=function(page){ return $ scope。sel page==page};//上一页$scope .previous=function(){ $ scope。出售页面(范围。出售第1页)；} //下一页$scope .next=function(){ $ scope。出售页面(范围。出售第1页)；};});})/脚本感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！