Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo-9 分页功能</title>
<script src="../plugins/angularjs/angular.min.js"></script> <!-- 分页插件 -->
<link href="../plugins/angularjs/pagination.css">
<script src="../plugins/angularjs/pagination.js"></script>
<!-- 分页插件/ --> <script>
var demo = angular.module("demoModule", ['pagination']);
demo.controller("demoController", function ($scope, $http) {
$scope.paginationConf = {
currentPage: 1,
itemsPerPage: 2,
totalItems: 10,
onChange: function () {
// alert("变了");
console.log("变了");
}
};
/*
pagination功能特点：
1.双向绑定
改变相应的变量，则分页条就会发生相应的改变。
currentPage itemsPerPage totalItems都是双向绑定的
改变一个就会改变了
2.并不处理记录数据，页面记录数据的更新必须由我们自己完成。
注意:
pagination功能和记录数据显示完全没有关系，只提供分页参数处理。
面记录数据的更新必须由我们自己完成
*/
$scope.increTotalItems = function(){
console.log($scope.paginationConf.totalItems); $scope.nameList.push( "刘备" + $scope.nameList.length);
$scope.paginationConf.totalItems = $scope.nameList.length; // $scope.paginationConf.totalItems = $scope.paginationConf.totalItems + 1;
console.log($scope.paginationConf.totalItems);
}; $scope.nameList = ["孙权", "刘备", "曹操", "大乔", "小乔"]; });
</script> </head>
<body ng-app="demoModule" ng-controller="demoController"> <!--<p ng-repeat="name in nameList">{{name}}</p>--> <table>
<tr ng-repeat="name in nameList" ng-model="nameList">
<td>{{name}}</td>
</tr>
</table> <input type="button" ng-click="increTotalItems()" value="自增">
<input ng-model="paginationConf.currentPage">
<input ng-model="paginationConf.itemsPerPage"> <tm-pagination conf="paginationConf"></tm-pagination>
</body>
</html>
Angular pagination分页模块
Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据的更多相关文章
- Layui的分页模块在网站中的应用
制作网站的时候,有时候我们常常会被一些要求复杂的分页给困住,最后要么就是写一个简单的分页,要么就做成瀑布流的形式. 有了Layui之后,我认为开发人员多了一个选择,那就是尝试用Layui内置的分页模块 ...
- Lind.DDD.Paging分页模块介绍
回到目录 分页组件网上有很多,MVC.Pager,JSPager等,通过实现方式大体分为前端分页和后端分页,前端分页是前台对list内存本地集合进行分页,缺点就是在大数据情况下,内存占用过高:后端分页 ...
- easyUI的分页，只显示第X 共Y页。改为显示 第X 页 共Y页
如下图,easyUI的分页,只显示第X 共Y页. 需求需要显示 第X 页 共Y页. 解决办法:在easyui-lang-zh_CN.js更改以下代码,即可.也就是在 “共{pages}页”前面加个 “ ...
- 【SSH】——封装参数不确定的分页查询
[前言] 在BS中,分页技术的应用相当频繁.说到分页,简单的分页就很好实现了,如果在分页的基础上再加上业务逻辑,这就使得分页的技术更加的灵活了. [简单分页] 我们先看一种简单的分页,为了做到复用,我 ...
- codeigniter分页类传多个参数(转)
http://example.com/index.php/控制器/方法名/页面的偏移值 页面的偏移值必须是方法名后第一个参数,否者分页类不能判断当前是哪一页,而用ci的分页类进行页面跳转时他是把偏移值 ...
- verilog中defparam的用法 （verilog调用底层模块（只改变）参数的传递）
当一个模块引用另外一个模块时,高层模块可以改变低层模块用parameter定义的参数值,改变低层模块的参数值可采用以下两种方式: 1)defparam 重定义参数 语法:defparam path_n ...
- django分页模块--django-pure-pagination
Django自带有分页的两个类,但是用起来没有第三方这个分页模块方便,下面介绍一下这个模块的使用方法. 1. 安装模块: pip install django-pure-pagination 2. ...
- angular原理及模块简介
Angular简介(大神可略过) Angular是一个强大的前端框架,其强大之处主要是可以把静态页面与动态数据绑定起来.平时我们看到的网页界面上面的数据都是固定,但如果我们要变化这些数据,例如我在一个 ...
- subprocess模块还提供了很多方便的方法来使得执行 shell 命令
现在你可以看到它正常地处理了转义. 注意 实际上你也可以在shell=False那里直接使用一个单独的字符串作为参数, 但是它必须是命令程序本身,这种做法和在一个列表中定义一个args没什么区别.而如 ...
随机推荐
- Tomcat安装及配置（Linux系统）
环境说明:Linux环境,CentOS 7版本. 第一步:下载tomcat 版本,下载地址:https://tomcat.apache.org/index.html 我用的是zip结尾的包 解压命令: ...
- Syste.IO命名空间下的流操作类之间的关系
- （原创）理解主机设备（PLC，PC机）之间的以太网通信
主机设备:PC机,PLC 网络设备:家用路由器 局域网包括了有线局域网和无线局域网(WIFI).怎么去使用2者? 网络设备的职责最终目的为了帮助2台主机的数据传输.路由器,交换机范围不同,目的相同.在 ...
- Matlab访问者模式
访问者(Visitor)模式的定义:将作用于某种数据结构中的各元素的操作分离出来封装成独立的类,使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作,为数据结构中的每个元素提供多种访问方式.它 ...
- English--分词短语
English|分词短语 现在开始讲解分词短语的内容.在英语的语法世界里面,想要将句子写的漂亮,分词短语,你值得拥有! 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识点的描述.力 ...
- ajax分页和搜索
//控制器function show(Request $request){ $page=$request->page?$request->page:1; $size=4; $pian=($ ...
- 浅谈HTML5的新特性
2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...
- 如何检测Windows中的横向渗透攻击
一.前言 横向渗透攻击技术是复杂网络攻击中广泛使用的一种技术,特别是在高级持续威胁(Advanced Persistent Threats,APT)中更加热衷于使用这种攻击方法.攻击者可以利用这些技术 ...
- 虚拟机安装mysql踩坑记录
本章节主要讲解的是在虚拟机centOs7版本以上安装mysql5.6版本,亲测可以直接使用,有需要帮助的小伙伴可以加本人QQ2246451792@qq.com!!!! 卸载centOs7自带的mari ...
- Gateway-Worker启动失败或者启动无法正常使用的几种方法
Workerman是一款开源高性能异步PHP socket即时通讯框架.支持高并发,超高稳定性,被广泛的用于手机app.移动通讯,微信小程序,手游服务端.网络游戏.PHP聊天室.硬件通讯.智能家居.车 ...