<!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分页模块 只提供分页参数处理 不处理分页记录数据的更多相关文章

  1. Layui的分页模块在网站中的应用

    制作网站的时候,有时候我们常常会被一些要求复杂的分页给困住,最后要么就是写一个简单的分页,要么就做成瀑布流的形式. 有了Layui之后,我认为开发人员多了一个选择,那就是尝试用Layui内置的分页模块 ...

  2. Lind.DDD.Paging分页模块介绍

    回到目录 分页组件网上有很多,MVC.Pager,JSPager等,通过实现方式大体分为前端分页和后端分页,前端分页是前台对list内存本地集合进行分页,缺点就是在大数据情况下,内存占用过高:后端分页 ...

  3. easyUI的分页，只显示第X 共Y页。改为显示 第X 页 共Y页

    如下图,easyUI的分页,只显示第X 共Y页. 需求需要显示 第X 页 共Y页. 解决办法:在easyui-lang-zh_CN.js更改以下代码,即可.也就是在 “共{pages}页”前面加个 “ ...

  4. 【SSH】——封装参数不确定的分页查询

    [前言] 在BS中,分页技术的应用相当频繁.说到分页,简单的分页就很好实现了,如果在分页的基础上再加上业务逻辑,这就使得分页的技术更加的灵活了. [简单分页] 我们先看一种简单的分页,为了做到复用,我 ...

  5. codeigniter分页类传多个参数(转)

    http://example.com/index.php/控制器/方法名/页面的偏移值 页面的偏移值必须是方法名后第一个参数,否者分页类不能判断当前是哪一页,而用ci的分页类进行页面跳转时他是把偏移值 ...

  6. verilog中defparam的用法 （verilog调用底层模块（只改变）参数的传递）

    当一个模块引用另外一个模块时,高层模块可以改变低层模块用parameter定义的参数值,改变低层模块的参数值可采用以下两种方式: 1)defparam 重定义参数 语法:defparam path_n ...

  7. django分页模块--django-pure-pagination

    Django自带有分页的两个类,但是用起来没有第三方这个分页模块方便,下面介绍一下这个模块的使用方法. 1. 安装模块: pip install django-pure-pagination 2.   ...

  8. angular原理及模块简介

    Angular简介(大神可略过) Angular是一个强大的前端框架,其强大之处主要是可以把静态页面与动态数据绑定起来.平时我们看到的网页界面上面的数据都是固定,但如果我们要变化这些数据,例如我在一个 ...

  9. subprocess模块还提供了很多方便的方法来使得执行 shell 命令

    现在你可以看到它正常地处理了转义. 注意 实际上你也可以在shell=False那里直接使用一个单独的字符串作为参数, 但是它必须是命令程序本身,这种做法和在一个列表中定义一个args没什么区别.而如 ...

随机推荐

  1. git安装和使用配置

    1.简介 Git是一个开源的分布式版本控制系统,能用于快速高效地处理任何或小或大的项目,它是Linus Torvalds为了帮助管理Linux内核开发而开发的一个源码开放的版本控制软件. 2.Linu ...

  2. TYPORA语法

    原文链接:https://blog.csdn.net/SIMBA1949/article/details/79001226

  3. C编程遇到的一些小细节

    1  typedef int ElemType  -->  typedef int ElemType; 此处要加分行(:),要区别  #defin a 20 此处不需要加分号:#define是预 ...

  4. Centos Docker 安装 Apache Guacamole

    经常在ubuntu上折腾,偶尔在centos来也来玩一把吧 1.安装DOCKER cd /etc/yum.repos.d wget https://download.docker.com/linux/ ...

  5. K8S学习笔记之Grafana App for Kubernetes的配置

    Grafana有一套针对Kubernetes监控的APP,和Grafana-Zabbix App类似,但是配置咋一看比较麻烦,主要参数都是来自K8S. 这款APP的详细介绍请参考Grafana App ...

  6. Matplotlib中figure、subplot、axes、axis的区别

    参考链接:https://blog.csdn.net/JasonZhu_csdn/article/details/85860963 画图板/画布: 这是一个基础载体,类似实际的画图板,用pyplot. ...

  7. java基础小练习,1-打印一百次(1~10)的随机数,2-固定一个随机数(1~100)，然后猜出他,3-定义以指定格式打印集合(ArrayList类型作为参数)，使用{}括起来，使用@代替,分隔每个元素

    推荐自己码一下,可以使用别的方法,面向对象,不需要注重过程 /* 题目:我需要打印一百次(1~10)的随机数 */ import java.util.Random; public class demo ...

  8. Java IO---字节流和字符流

    一.IO流简介 流 流是一个抽象概念,Java程序和外部设备(可以是硬盘上的文件,也可以是网络设备)之间的输入输出操作是基于流的. 流就好比水管中的水流,具有流入和流出,类比数据的输入和输出. Jav ...

  9. 2019 乐游网络java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.乐游网络等公司offer,岗位是Java后端开发,因为发展原因最终选择去了乐游网络,入职一年时间了,也成为了面 ...

  10. logback配置和使用

    简介 logback是由log4j创始人设计的又一个开源日志组件.当前分成三个模块: logback-core是其它两个模块的基础模块. logback-classic是log4j的一个 改良版本.此 ...