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. 6个函数的output看JS的块级作用域

    1. var output = 0; (function() { output++; }()); console.log(output); 函数对全局的output进行操作,因为JS没有块级作用域,所 ...

  2. C++ 画星号图形——空心三角形（星号居中对齐）（核心代码介绍）

    //输出另外一种由星号组成的三角形(星号居中对齐) int a;//控制组成三角形的星号的行数 cout<<"请输入要组成三解形的星号的行数n(n>=2):\n" ...

  3. asp.net core项目发布网站时的选项

    发布网站时的选项 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序. Release 称为发布版本,它往往是进行了各种优化,使得程序在代码大小和运行速度上都是最优的, ...

  4. HTML/Elements/base

    https://www.w3.org/wiki/HTML/Elements/base HTML/Elements/base < HTML‎ | Elements   List of Elemen ...

  5. [UVa 1619]Feel Good

    #include <bits/stdc++.h> using namespace std; const int maxn = 1000010; struct node { int num; ...

  6. Spring的IOC原理(转载)

    在网上看到一篇文章,感觉写得挺不错的,转载一下,本文转载自:http://www.cnblogs.com/xdp-gacl/p/3707631.html 一. IoC理论的背景 我们都知道,在采用面向 ...

  7. 静态工厂方法VS构造器

    我之前已经介绍过关于构建者模式(Builder Pattern)的一些内容,它是一种很有用的模式用于实例化包含几个属性(可选的)的类,带来的好处是更容易读.写及维护客户端代码.今天,我将继续介绍对象创 ...

  8. Linq to Sql : 并发冲突及处理策略

    原文:Linq to Sql : 并发冲突及处理策略 1. 通过覆盖数据库值解决并发冲突 try { db.SubmitChanges(ConflictMode.ContinueOnConflict) ...

  9. 【leetcode】两数之和

    https://leetcode.com/problems/two-sum/ Example: Given nums = [2, 7, 11, 15], target = 9, Because num ...

  10. java编程思想 一切都是对象

    java是一种面向对象程序设计语言,一切都是对象,并且用引用操作对象,如一个电视机就是一个对象,而操作电视机的遥控器就是引用,引用可以单独存在,如遥控器可以单独存在. String s; 这里只是创建 ...