angular-utils-pagination是基于angular,bootstrap,jquery的一个分页插件,详细介绍以及使用方法参照:

Git:https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

1:使用bower安装

y@y:app01$ bower install angular-utils-pagination --save

2:界面

3:控制器
tbody
tr(dir-paginate="a in adviceList | itemsPerPage:pageSize " current-page="currentPage" total-items="totalItems")
td(style="vertical-align:middle") {{pageSize*(currentPage-1)+$index+1}}
td(style="vertical-align:middle") {{a.nsrsbh}}
td(style="vertical-align:middle") {{a.nsrmc}}
td(style="vertical-align:middle") {{a.bjsjh}}
td(style="vertical-align:middle") {{a.type}}
td(style="vertical-align:middle") {{a.version}}
td(style="vertical-align:middle") {{a.content}}
td(style="vertical-align:middle") {{a.date | getLocalTimeFilter}}
.text-center
dir-pagination-controls(boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)")
 
//分页参数
$scope.currentPage = 1;
$scope.pageSize = 2;
$scope.totalItems = 0; $scope.adviceList = []; /**
* 获取意见反馈列表
*/
$scope.getAdviceList = function(){
$http.get('/api/advices/'+$scope.currentPage).success(function(result) {
$scope.adviceList = result.advices;
$scope.totalItems = result.totalItems; }).error(function(){
alert("网络错误");
});
}; /**
* 翻页操作
* @param newPageNumber
*/
$scope.pageChangeHandler = function(newPageNumber){
$scope.getAdviceList();
};

4:服务端

// Get list of advices
exports.index = function(req, res) {
var pageSize = 2;
var currentPage = req.params.currentPage; var start = (currentPage-1)*pageSize; Advice.find({active:true}).skip(start).limit(pageSize).exec(function (err, advices) {
if(err) { return handleError(res, err); } Advice.count({active:true},function(err,totalItems){
if(err) { return handleError(res, err); }
return res.json(200, {advices:advices,totalItems:totalItems});
}); });
};

angular-utils-pagination 使用案例的更多相关文章

  1. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...

  2. angular 官网英雄案例 报错整理

    1.导入of 报错 import { of } from 'rxjs/observable/of'; 2. 服务注入报错 在app.module.ts引入 3.使用angular-in-memory- ...

  3. angular-ui-bootstrap插件API - Pagination

    Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <h ...

  4. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  5. 013---Django的分页器

    知识预览 分页 Django的分页器(paginator) view from django.shortcuts import render, HttpResponsefrom app01.model ...

  6. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

  7. AngularJs基础总结(1.4版本)

    注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...

  8. 国内ng学习网站

    Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...

  9. CRM之分页

    分页简介 分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示. 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割. 当我们不使用分页功能的时候,会面 ...

  10. crm 添加用户 编辑用户 公户和私户的展示,公户和私户的转化

    1.添加用户 和编辑可以写在一起 urls.py url(r'^customer_add/', customer.customer_change, name='customer_add'), url( ...

随机推荐

  1. iOS 关于枚举的使用

    枚举值 它是一个整形(int)  并且,它不参与内存的占用和释放,枚举定义变量即可直接使用,不用初始化. 在代码中使用枚举的目的只有一个,那就是增加代码的可读性. 使用: 枚举的定义如下: typed ...

  2. rsyslog 报 WARNING: rsyslogd is running in compatibility mode.

      [root@localhost log]# uname -a Linux localhost.localdomain 2.6.32 #1 SMP Sun Sep 20 18:58:21 PDT 2 ...

  3. 安全框架Shiro和Spring Security比较

    Shiro 首先Shiro较之 Spring Security,Shiro在保持强大功能的同时,还在简单性和灵活性方面拥有巨大优势. Shiro是一个强大而灵活的开源安全框架,能够非常清晰的处理认证. ...

  4. Java基础知识强化17:JAVA不可以将所覆盖的方法的访问权限变得比父类的小

    首先我们看一下下面的代码如下: interface I { void go(); } abstract class A implements I { } class C extends A { voi ...

  5. 登录网站爬虫(保持Cookie不变)

    平时经常需要到学校的信息门户去查看课表及其他信息,于是想做一个爬虫 ,可以自动替我登录并且得到这些信息,于是今天动手写了一个爬虫: 首先登录学校的信息门户:http://cas.whu.edu.cn/ ...

  6. 使用MWC四轴起飞侧翻解决方法

    原因如下:1.电机顺序错了,如上图所示,上面蓝色的箭头是机头,绿色的箭头是电机转向,3.10.11.9对应MWC飞控版上的D3,D9,D11,D9,蓝色箭头对应MWC飞控板的箭头 或者传感器的Y轴 以 ...

  7. 线程技术 ☞ Future模式

    线程技术可以让我们的程序同时做多件事情,线程的工作模式有很多,常见的一种模式就是处理网站的并发,今天我来说说线程另一种很常见的模式,这个模式和前端里的ajax类似:浏览器一个主线程执行javascri ...

  8. javascript实现Map

    function Map() { this.elements = new Array(); // 获取MAP元素个数 this.size = function() { return this.elem ...

  9. Content-Disposition的使用和注意事项

    转载:http://www.cnblogs.com/jzaileen/articles/1281025.html 最近不少Web技术圈内的朋友在讨论协议方面的事情,有的说web开发者应该熟悉web相关 ...

  10. (转帖) 如何將值delay n個clock? (SOC) (Verilog)

    来源:http://www.cnblogs.com/oomusou/archive/2009/06/15/verilog_dly_n_clk.html /* (C) OOMusou 2009 http ...