1、angular-pagination

是基于angular 编写的可复用分页指令

安装

克隆项目到本地：

git clone https://github.com/febobo/angular-pagination.git

要跑demo环境要求：

node , bower , npm , gulp

安装： npm install && bower install

运行： gulp serve

demo用法

html

 <body ng-app="demo" ng-controller="demoCtro" class="row text-center">

     <div ui-pagination conf="conf"></div>

 </body>

JS

 var app = angular.module('demo' , ['pagination']);

   app.controller('demoCtro' , function($scope){

       $scope.title = 'pagination-directive';

       $scope.conf = {

         // 总条数

         total : 1190,

         // 当前页

         currentPage : 1,

         // 一页展示多少条

         itemPageLimit : 1,

         // 是否显示一页选择多少条

         isSelectPage : false,

         // 是否显示快速跳转

         isLinkPage : false

       }

       // 监控你的页码 ， 发生改变既请求

       $scope.$watch('conf.currentPage + conf.itemPageLimit' , function(news){

          // 把你的http请求放到这里

          console.log($scope.conf.currentPage , $scope.conf.itemPageLimit)

       })

   })

AngularJs--angular-pagination可复用的分页指令的更多相关文章

  1. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...

  2. angular分页指令

    目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...

  3. Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Angularjs进阶笔记（2）-自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...

  5. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  6. 转载使用Flurl制作可复用的分页组件

    使用Flurl制作可复用的分页组件 使用ASP.NET MVC查询时,一直使用MvcPaging组件,虽然需要自定义MvcPaging.Pager才能达到我想要的效果,但在没有较好的URL库时,还是这 ...

  7. 使用第三方插件pagination在页面实现分页功能

    1.导入相应的js和css文件 2.在相应的页面映入pagination.js和pagination.css 3.将页面的分页代码替换为pagination动态生成的分页代码 4.编写js代码

  8. Angularjs+Bootstrap实现分页指令

    本插件的开发目的主要给前端同学使用,本人是专注于后台开发的,对css样式不熟悉,但逼于前端要求做一个共公组件方便日常开发,所以这个插件在样式上可能不适合大部分人,喜欢的拿走吧,不喜欢的也请别喷.  一 ...

  9. [Angularjs]angular ng-repeat与js特效加载先后导致的问题

    写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...

随机推荐

  1. windows 安装MySql

    转载:http://blog.csdn.net/longyuhome/article/details/7913375 Win7系统安装MySQL5.5.21图解 大家都知道MySQL是一款中.小型关系 ...

  2. Windows自带压缩解压工具

    压缩一个文件: 命令行:makecab fileName.txt fileName.zip 鼠标操作:选中文件-->鼠标右键-->Send to-->Compressed (zipp ...

  3. FTP上传文件提示550错误原因分析。

    今天测试FTP上传文件功能,同样的代码从自己的Demo移到正式的代码中,不能实现功能,并报 Stream rs = ftp.GetRequestStream()提示远程服务器返回错误: (550) 文 ...

  4. js获取modelandview的值

    JS当中不能接收ModelAndView的返回值吗?一定要在JSP页面中才能接收吗? 1 方法一 [有效?] 可以的,跟el表达式访问方式一样. 示例代码,一个数据展示请求的Action中存入一个us ...

  5. webkitTransitionEnd webkitAnimationEnd事件

    在CSS 3中,可以通过使用keyframe样式属性与animation样式属性实现animation动画,使用transition样式属性实现transition动画. 在WebKit引擎的浏览器( ...

  6. [翻译]类型双关不好玩：C中使用指针重新解释是坏的

    原文地址 Type punning isn't funny: Using pointers to recast in C is bad. C语言中一个重新解释(reinterpret)数据类型的技巧有 ...

  7. php usort 按照数组中的某个键值排序

    //php usort 按照数组中的某个键值排序 如果第一个参数小于第二个参数 -> 返回小于0的整数如果第一个参数等于于第二个参数 -> 返回等于0的整数如果第一个参数大于于第二个参数 ...

  8. WebApi接口传参不再困惑（4）：传参详解(转载)

    WebApi接口传参不再困惑(4):传参详解   前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方 ...

  9. JMeter学习-036-JMeter调试工具之三---Debug Sampler

    前面两篇文章分别讲述了 HTTP Mirror Server 和 Debug PostProcessor 的脚本调试实例.此文主要讲述第三种调试工具:DebugSampler,其主要是查看JMeter ...

  10. LeetCode First Unique Character in a String

    原题链接在这里:https://leetcode.com/problems/first-unique-character-in-a-string/ 题目: Given a string, find t ...