Angular+Angular-Ui实现分页（代码更加简单，更加容易懂哦）

Angular+Angular-Ui实现分页（代码更加简单，更加容易懂哦）
前⾯写了个分页，但是个⼈认为只能玩玩，实际业务上的话代码太繁杂（笔者想⾛代码、性能精简化之路【不知道哪天才能成为⾼⼿~·YY⼀下⽆伤⼤雅】），逻辑上有点混乱。

那么今天我们来看看另外⼀种只实现分页没有查询的例⼦吧（要想查询之后还分页的，请再看看i我前⾯写的那个分页⽂章，结合这篇⽂章，相信你很快就能搞定！）。

好了，先看效果：
采⽤了Angular-UI中的分页组件，关于Angular-UI如何使⽤请移步这⾥中的bootstrap章节（其中ui-router等我也建议你多看看）
注意必须按照官⽹上引⼊相应的js和css才能⽣效，千万不要忘记了。

HTML代码如下：
<div class="">
<table class="table">
<thead class="hed">
<tr>
<th>省份1</th>
<th>省份2</th>
<th>省份3</th>
<th>省份4</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in allitem[currentPage-1]">
<td ng-bind="a.n"></td>
<td ng-bind="a.s"></td>
<td ng-bind="a.n"></td>
<td ng-bind="a.s"></td>
</tr>
</tbody>
</table>
</div>
<div class="">
<pagination boundary-links="true" total-items="totalItems"
ng-model="currentPage" class="pagination-sm embed-responsive-item"
previous-text="上⼀页"
next-text="下⼀页"
first-text="⾸页"
last-text="尾页"
max-size="maxSize"
rotate="false" num-pages="numPages">
</pagination>
</div>
JS代码如下：
$scope.currentPage =1;//初始当前页
$scope.maxSize = 3;//最多显⽰3页其他的⽤···代替
$scope.allitem=[];//存放所有页
$http.get('./js/test').success(
function (data) {
$scope.addr=data.l;
var num= $scope.addr.length;
$scope.totalItems =num;//共有多少条数据
for(var i=0;i<num;i+=10){
$scope.allitem.push($scope.addr.slice(i,i+10))
}//此⽅法可以将⼀个数组分成多个数组并且放在了⼀个⼤数组⾥⾯，按每个数组10条数据【因为组件默认为10条数据⼀页】存放，假如41条数据的话我们将分成5页 }
);
笔者Js⽂件夹下的test.json存放的是中国地址JSon数据源，⽤于测试。

================================================================================
PS:上述版本是15年的了；现在上传下最新版本的样例吧；其实就是官⽹上的例⼦，鉴于某些宝宝不会FQ看，就拿下来了；
下载本地打开就可以了；2017-01-05。