前面写了个分页,但是个人认为只能玩玩,实际业务上的话代码太繁杂(笔者想走代码、性能精简化之路【不知道哪天才能成为高手~·YY一下无伤大雅】),逻辑上有点混乱。那么今天我们来看看另外一种只实现分页没有查询的例子吧(要想查询之后还分页的,请再看看i我前面写的那个分页文章,结合这篇文章,相信你很快就能搞定!)。好了,先看效果:

采用了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年的了;现在上传下最新版本的 样例吧;其实就是官网上的例子,鉴于某些宝宝不会翻墙看,就拿下来了;

http://files.cnblogs.com/files/wohenxion/page.rar下载本地打开就可以了;2017-01-05

Angular+Angular-Ui实现分页(代码更加简单,更加容易懂哦)的更多相关文章

  1. PHP分页初探 一个最简单的PHP分页代码的简单实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...

  2. angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

  3. 开始学习Angular Mobile UI

    介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...

  4. 阿里云 Angular 2 UI框架 NG-ZORRO介绍

    说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...

  5. angular实现表格的分页显示

    最近项目中用到了一个功能,就是表格的分页显示.以前没整过,今天学会了,把它整理一下,下次可以直接用. 实例代码:https://github.com/dreamITGirl/projectStudy ...

  6. PHP分页初探 一个最简单的PHP分页代码实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...

  7. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  8. Angular第三方UI组件库------ionic

    一.Angular  UI组件库  ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...

  9. SAP UI 搜索分页技术

    搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来.今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分页的实现原理.后半部分由SAP成都研究院 ...

  10. iOS开发UI篇—从代码的逐步优化看MVC

    iOS开发UI篇—从代码的逐步优化看MVC 一.要求 要求完成下面一个小的应用程序. 二.一步步对代码进行优化 注意:在开发过程中,优化的过程是一步一步进行的.(如果一个人要吃五个包子才能吃饱,那么他 ...

随机推荐

  1. redis windows安装

    下载:https://github.com/MicrosoftArchive/redis/releases 命令行启动:redis-server.exe redis.windows.conf 以服务启 ...

  2. 双倍回文(bzoj 2342)

    Description Input 输入分为两行,第一行为一个整数,表示字符串的长度,第二行有个连续的小写的英文字符,表示字符串的内容. Output 输出文件只有一行,即:输入数据中字符串的最长双倍 ...

  3. ashx接收参数 ashx传递参数

    原文发布时间为:2009-09-30 -- 来源于本人的百度文章 [由搬家工具导入] Handler.ashx文件: <%@ WebHandler Language="C#" ...

  4. 使用C#的BitmapData

    原文发布时间为:2009-01-16 -- 来源于本人的百度文章 [由搬家工具导入] 我在前两篇图片处理的文章里几乎都用BitmapData来做图片处理的,那么这个东东究竟是个什么玩意儿呢? C#好是 ...

  5. python日期时间相关

    参考: http://www.coder4.com/archives/2239 http://www.cnblogs.com/lhj588/archive/2012/04/23/2466653.htm ...

  6. Centos7 安装docker ce

    一. 安装docker 1.升级rpm包 yum -y update 2. 通过命令设置Docker CE 资源库: yum install -y yum-utils yum-config-manag ...

  7. hdu 5685(逆元)

    Problem A Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  8. MAX() OVER() 函数

    SELECT T1.FRAMENO, T1.UNDERTAKER10,T1.STATUSCODEDATE10, MAX(T1.STATUSCODEDATE10) OVER(PARTITION BY T ...

  9. slam学习足迹

    1.slam入门介绍 2.齐次坐标系 3.贝叶斯滤波 均值:平均值 标准差:样本的集中程度/分散度 方差:标准差的平方 协方差:不同维度之间的关系(相关度) 协方差矩阵:多维度之间的关系(相关度) 4 ...

  10. TCO 2015 Round 2A DIV1

    ModModMod 傻逼数论 题意: 这是一道卖萌的题..给你一个取模序列$m$,令$f(x)=(\cdots (x\ mod\ m[0])\ mod m[1])\mod m[2]\cdots $,问 ...