angular-关于分页
列表渲染数据量庞大的时候,我们需要用到一个filter来控制我们的列表进行循环渲染。
这就要用到一个filter,limitTo。
在此,我使用了变量来进行控制,可以随时调换每页的数量,并且配合分页按钮,进行上一页,下一页等操作。
//分页
$scope.begin = 0;
$scope.limit = 3
$scope.limitNub = 3;
window.listLength = 0;
//获取子控制器当中的跳转页数
$scope.$on("change", function(event,data){
$scope.gopages = data;
}); //首页
$scope.Home = function (){
$scope.begin = 0;
};
//上一页
$scope.PgUp = function (){
$scope.begin -= $scope.limitNub;
if($scope.begin < 0){
$scope.begin = 0;
}
};
//下一页
$scope.PgDn = function (){
$scope.begin += $scope.limitNub;
if($scope.begin > listLength){
$scope.begin = Math.floor(listLength/$scope.limitNub)*$scope.limitNub;
}
};
//尾页
$scope.End = function (){
$scope.begin = Math.floor(listLength/$scope.limitNub)*$scope.limitNub;
};
//去X页
$scope.goPage = function (){
if($scope.gopages < (Math.floor(listLength/$scope.limitNub)+2)){
$scope.begin = ($scope.gopages-1)*$scope.limitNub;
}
}; }])
当中还使用了$emit和$on方法进行控制器之间的数据通讯,使得去到某页可以具体实现。
当然,此方法还有待改进,只是先如此使用。
angular-关于分页的更多相关文章
- angular.js分页代码的实例
对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...
- Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular+bootstrap分页指令案例
AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...
- angular表格分页
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8&qu ...
- Angular简易分页设计(二):封装成指令
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...
- Angular简易分页设计(一):基本功能实现
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/p/6752990.html) 之前网站的后台管理为了图快,把Jquer ...
- angular js 分页
一.编写实体类PageResult public class PageResult implements Serializable { private Long total;//总记录数 privat ...
- angular自定义分页组件(实用)
功能描述:分页,点击按钮或者下一页获取分页接口,同时active到对应页码. html模块: <page page-count="totalPage" on-click-pa ...
- Angular.js分页代码
$scope.reloadList=function(){ $scope.findPage( $scope.pagina ...
- 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法
这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ...
随机推荐
- 【Ecshop】修改处理用户购物车的行为
Ecshop v2.7.3的购物车处理方面在现在看来有比较反用户体验的设计: 用户未登录时加入购物车的商品,在用户登录后会被清空而不是加入到登录用户的购物车中: 用户登录后加入购物车的商品,在退出后会 ...
- DeepFaceLab报错, Could not create cudnn handle 解决方法!
DeepFaceLab 虽然没有可视化界面,但是在众多换脸软件中,是安装最方便,更新最快,整体性能最佳的一个.这个软件对于系统依赖很低,也就是不需要装各种各样的“插件”. 但是即便如此,由于版本的不断 ...
- JavaScript事件对象与事件的委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- spark和MR比较
MapReduce: 分布式的计算框架 缺点:执行速度慢 IO瓶颈 ==> 磁盘IO 网络IO shuffle机制:数据需要输出到磁盘,而且每次shuffle都需要进行排序操作 框架的机制: 只 ...
- 802. Find Eventual Safe States
https://leetcode.com/problems/find-eventual-safe-states/description/ class Solution { public: vector ...
- Unidirectional TSP UVA - 116 多段图的最短路
题目:题目链接 思路:从后往前进行dp,用next数组记录字典序最小的那一条路径 AC代码: #include <iostream> #include <cstdio> #in ...
- 华东交通大学2018年ACM“双基”程序设计竞赛 K
MIKU酱是个玩游戏氪金的人,游戏公司给她制定了新的规则,如果想从关卡i到关卡j,你需要交一些钱就可以了,但同时,MIKU酱的爸爸zjw很爱她,所以她可以每过一关就向她爸要一次钱,但她爸每次给他的钱是 ...
- Redis数据结构以及Strings型操作
Redis数据结构图: Strings型 <String key,String value>: keys * 查看所有key get 获取key的value值 append 向key对 ...
- CLOUDSTACK FOR HYPER-V
原文地址:http://zhu.vn/archives/1040 我这里是内网测试环境,宿主机为Server 2012R2 ,虚拟化技术为HYPER-V,域环境来的(不是域环境玩不了). 先给宿主机安 ...
- IOS开发---菜鸟学习之路--(十)-实现新闻详细信息浏览页面
前面已经将了上下拉刷新 实现了上下拉刷新后我们的第一级界面就做好,接下来我们就需要实现 新闻详细信息浏览了 我个人认为一般实现新闻详细页面的方法有两种(主要是数据源的不同导致了方法的不同) 第一种是本 ...