利用Angular+Angular-Ui实现分页（代码加简单）

今天我们来看看一种只实现分页没有查询的例子吧，先看效果：

采用了Angular-UI中的分页组件，关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节（其中ui-router等我也建议你多看看）

注意：必须按照官网上引入相应的js和css才能生效，千万不要忘记了。

HTML代码如下：

 

  

  

   
省份1
   
省份2
   
省份3
   
省份4
  
  
  

  

   

   

   

   

  
 
  
 
 
 


 
 
 
 

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 
 

笔者Js文件夹下的test.json存放的是中国地址JSon数据源，用于测试。

================================================================================

PS:上述版本是15年的了；现在上传下最新版本的 样例吧；其实就是官网上的例子，鉴于某些宝宝不会FQ看，就拿下来了；

点击这里进行下载

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。谢谢大家对脚本之家的支持。