利用Angular+Angular-Ui实现分页(代码加简单)

 更新时间:2017年03月10日 11:47:15   作者:薄祸  
这篇文章主要介绍了利用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页
 
    
   }
  );

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

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

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

点击这里进行下载

总结

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

相关文章

  • Angular 4根据组件名称动态创建出组件的方法教程

    Angular 4根据组件名称动态创建出组件的方法教程

    组件是我们在学习angular中必不可少的一部分,下面这篇文章主要给大家介绍了关于Angular 4如何根据组件名称动态创建出组件的相关资料,文中通过图文与示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-11-11
  • 基于Angularjs-router动态改变Title值的问题

    基于Angularjs-router动态改变Title值的问题

    今天小编就为大家分享一篇基于Angularjs-router动态改变Title值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJS 路由详解和简单实例

    AngularJS 路由详解和简单实例

    本文主要介绍AngularJS 路由,这里整理了相关资料进行详细介绍,并附实例代码和实现效果图,有需要的小伙伴可以参考下
    2016-07-07
  • Angular2搜索和重置按钮过场动画

    Angular2搜索和重置按钮过场动画

    这篇文章主要介绍了Angular2搜索和重置按钮过场动画,需要的朋友可以参考下
    2017-05-05
  • AngularJS封装$http.post()实例详解

    AngularJS封装$http.post()实例详解

    这篇文章主要介绍了 AngularJS封装$http.post()实例详解的相关资料,需要的朋友可以参考下
    2017-05-05
  • AngularJS监听ng-repeat渲染完成的方法

    AngularJS监听ng-repeat渲染完成的方法

    这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AnglarJs中的上拉加载实现代码

    AnglarJs中的上拉加载实现代码

    上拉加载,是目前手机网站加载数据的一种常用方式,本文主要讲解AnglarJs集成,上拉加载功能。感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02
  • 浅谈Angular路由守卫

    浅谈Angular路由守卫

    这篇文章主要介绍了浅谈Angular路由守卫,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angularjs中使用layDate日期控件示例

    Angularjs中使用layDate日期控件示例

    本篇文章主要介绍了Angularjs中使用layDate日期控件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Angularjs material 实现搜索框功能

    Angularjs material 实现搜索框功能

    这篇文章主要介绍了Angularjs material 实现搜索框功能的相关资料,需要的朋友可以参考下
    2016-03-03

最新评论