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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
vue实现列表拖拽排序的功能
Nov 02 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中$_SERVER使用说明
2015/07/05 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python日志记录模块实例及改进
2017/02/12 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
给同学的道歉信
2014/01/16 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
《小池塘》教学反思
2014/02/28 职场文书
优秀教研组申报材料
2014/12/26 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电