AngularJs实现分页功能不带省略号的代码


Posted in Javascript onMay 30, 2016

angularJs 的分页重点体现在对 过滤器 的使用。这个过滤器也并不复杂。

首先上 html 代码:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-">
<meta name="viewport" content="width=device-width">
<title>demo</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div ng-controller="demoCtrl">
<div>
<ul>
<li ng-repeat="sentences in demoLists[].name | paging:currentPage*listsPerPage | limitTo:listsPerPage">{{sentences}}</li> <!-- ng-repeat 动态生成模拟的数据 -->
</ul>
</div>
<div>
<a class="step prevLink" ng-click="prevPage()">上一页</a>
<a ng-class="{true:'currentStep',false:'step'}[num==currentPage]" ng-repeat="num in pageNum" ng-click="setPage(num)">{{num+}}</a> <!-- ng-repeat 动态生成页码 -->
<a class="step nextLink" ng-click="nextPage()">下一页</a>
</div>
</div>
<script src="angular.min.js"></script> <!-- 引入你的 angularJs 文件 -->
<script src="demo.js"></script>
</body>
</html>

这里面用到了 ng-class,当前页 currentPage 等于页码 num 时,显示 currentStep 的样式,不等于时显示 step 的样式。

重点代码在 13 行,ng-repeat 模拟数据的时候加了过滤器,过滤器名字叫 paging 和一个 angular 自带的过滤 limitTo。

然后是 css 代码,没有什么可说的,主要是调样式。其中记得加上 ng-class 里的两个样式。

ul>li{
list-style:none;
width:px;
height:px;
border:px solid #CAF;
margin-bottom:px;
padding-left:px;
}
.nextLink,.prevLink{
font-size: px;
line-height: px;
height: px;
border: solid px #aaa;
color: #;
padding: px;
margin: px;
list-style: none;
background: #fff;
float: left;
cursor: pointer;
}
a.prevLink:hover,a.nextLink:hover {
background: #aaa !important;
color: #fff !important;
cursor: pointer;
}
.step {
display: block;
line-height: px;
height: px;
border: solid px #aaa;
color: #;
background: #fff;
padding: px;
font-size: px;
float: left;
margin: px;
list-style: none;
cursor: pointer;
}
.currentStep{
border-color: #fff;
padding: px;
color: #f;
font-weight: bold;
float: left;
display: block;
line-height: px;
height: px;
padding: px;
font-size: px;
float: left;
margin: px;
list-style: none;
cursor: pointer;
}

最后就是 js 了

var demoApp = angular.module('demoApp',[]);
demoApp.filter('paging',function(){ //paging 过滤器
return function(lists,start){ //两个参数 lists 是在 html 里你ng-repeat的原始数据:
// start 也就是 paging 后面传的参数,即 currentPage*listsPerPage
return lists.slice(start); //将原始数据按照 start 分割
};
});
demoApp.controller('demoCtrl',['$scope',function($scope){ //页面控制器
$scope.demoLists = [ //模拟数据
{name:['hello world','hello world again',
'why i say hello wrold',
'i dont know the reason',
'maybe because i am a developer.',
'thank you for reading this',
'why i say thank you',
'cause this stuff has nothing to do with your angularJs studying',
'these are just demo sentences.',
'Do not have any special meanings.',
'and you still take time to read this row by row',
'what could i say?',
'okay.maybe you wanna lenrn how json works.']
}
];
$scope.dataNum = $scope.demoLists[].name.length; //获得数据总个数
$scope.pages = Math.ceil($scope.dataNum/); //按照每页显示个数据,得到总页数
$scope.pageNum = []; //生成页码,在 html里 ng-repeat 出来
for(var i=;i<$scope.pages;i++){
$scope.pageNum.push(i);
}
$scope.currentPage = ; //设置当前页是 
$scope.listsPerPage = ; //设置每页显示 个
$scope.setPage = function(num){ // 当点击页码数字时执行的函数
$scope.currentPage = num; //将当前页 设置为 页码数
}
$scope.prevPage = function(){ //点击上一页执行的函数
if($scope.currentPage > ){
$scope.currentPage--;
}
}
$scope.nextPage = function(){ //点击下一页执行的函数
if ($scope.currentPage < $scope.pages-){
$scope.currentPage++;
}
}
}]);

这中间要说一下,你生成的 pageNum 是从 0 开始的,但真正的 页码 都是从一开始,所以这也就是 html 里 18 行是 num +1 的缘故。

以上内容是小编给大家介绍的AngularJs实现分页功能不带省略号的代码,希望能够帮助到大家,如果大家想了解更多有关angularjs的知识敬请关注三水点靠木网站!

Javascript 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
清除输入框内的空格
Dec 21 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 #Javascript
AngularJs表单验证实例详解
May 30 #Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 #Javascript
jquery获取form表单input元素值的简单实例
May 30 #Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 #Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 #Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 #Javascript
You might like
用PHP调用数据库的存贮过程
2006/10/09 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Symfony核心类概述
2016/03/17 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
js取小数点后两位四种方法
2019/01/18 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python实现批量文件重命名
2019/10/31 Python
Python 如何展开嵌套的序列
2020/08/01 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
会计应届生的自荐信
2013/12/13 职场文书
开办饭店创业计划书
2013/12/28 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
小学评语大全
2014/04/22 职场文书
平安工地汇报材料
2014/08/19 职场文书
活动总结范文
2014/08/30 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
幼儿园辞职书
2015/02/26 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
新课程改革心得体会
2016/01/22 职场文书