如何使用Angular+Angular-Ui实现分页

这篇文章主要介绍如何使用Angular+Angular-Ui实现分页，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

先看效果：

采用了Angular-UI中的分页组件，关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的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页           }   );

以上是“如何使用Angular+Angular-Ui实现分页”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！