angular-utils-pagination 使用案例
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 使用案例的更多相关文章
- angular+bootstrap分页指令案例
AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...
- angular 官网英雄案例 报错整理
1.导入of 报错 import { of } from 'rxjs/observable/of'; 2. 服务注入报错 在app.module.ts引入 3.使用angular-in-memory- ...
- angular-ui-bootstrap插件API - Pagination
Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <h ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- 013---Django的分页器
知识预览 分页 Django的分页器(paginator) view from django.shortcuts import render, HttpResponsefrom app01.model ...
- Ngnice-国内ng学习网站
今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...
- AngularJs基础总结(1.4版本)
注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...
- 国内ng学习网站
Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...
- CRM之分页
分页简介 分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示. 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割. 当我们不使用分页功能的时候,会面 ...
- crm 添加用户 编辑用户 公户和私户的展示,公户和私户的转化
1.添加用户 和编辑可以写在一起 urls.py url(r'^customer_add/', customer.customer_change, name='customer_add'), url( ...
随机推荐
- redis学习心得之一【安装redis初体验】
在linux下安装redis 说起这个比mysql的安装过程简单多乐,它不需要configure,只需要解压之后make就可以,无需make install ~$ wget http://redis. ...
- DBCP,C3P0,Tomcat_JDBC 性能及稳定性测试
1.测试环境: 硬件环境: 数据库服务器:2U*8核 8G内存 测试服务器: 2U*8核 6G内存 软件环境: jdk: 1.6.29 mysql: 5.0.77 mysql_driver: my ...
- Lucene的多域查询、结果中查询、查询结果分页、高亮查询结果和结果评分
1.针对多个域的一次性查询 1.1.三种方案 使用lucene构造搜索引擎的时候,如果要针对多个域进行一次性查询,一般来说有三种方法: 第一种实现方法是创建多值的全包含域的文本进行索引 ...
- Struts2方法调用的三种方式
在Struts2中方法调用概括起来主要有三种形式 第一种方式:指定method属性 <action name="student" class="com.itmyho ...
- 关于Daydream VR的最直白的介绍
虚拟现实(Virtual Reality),简称虚拟技术,也称虚拟环境,是利用电脑模拟产生一个三度空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户如同身历其境一般,电脑可以立即进行复杂的运算,将精 ...
- 向量旋转 UPC 2217
这道题目是13山东省省赛的签到题,题目大意是给等边三角形的两个定点,让求逆时针旋转之后的第三个点的坐标,原来不会向量的旋转,在网上找了找,找到一篇挺好的,直接贴过来. 向量的旋转 实际做题中我们可能会 ...
- IOS 开发 【序】
首先说说环境的搭建: 需要有一台搭载开发环境的电脑 其实简单的设备就行,不过好的设备会提高开发效率. 有了设备,剩下的就是需要集成开发环境. 去 app store 下载最新的 xcode. 安装上x ...
- angularjs项目中关于服务的应用
/** *普通ajax请求公共服务 */ mainModule.factory('myService',function($http,$q){ var service = {}; var baseUr ...
- (转)php中GD库的配置,解决dedecms安装中GD不支持问题
了解gd库 在php中,使用gd库来对图像进行操作,gd库是一个开放的动态创建的图像的源代码公开的函数库,可以从官方网站http://www.boutell.com/gd处下载.目前,gd库支持gif ...
- 二、T4模板
上文带大家见识了下T4,这里呢开始介绍T4模板有关的内容.关于T4模板介绍和使用网上一搜一箩筐,想深入研究的可以自行去找些资料,这里只介绍接下来我们需要使用的一些知识,不会面面俱到的讲T4模板所有的知 ...