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. Bash On Win10 (WSL) 安装 Odoo 开发环境

    前段时间微软发布了Bash On Win10,虽然目前还是Beta阶段,但是一想到再也不用折腾虚拟机上跑odoo了,就忍不住手痒,尝试在WSL上安装了一下odoo,结果比较惊喜,感觉可以抛弃Vitru ...

  2. JavaScript模拟鼠标右键菜单

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

  3. DoModal时带出次级窗口闪现

    最近在做MFC 界面开发. 在一个CDialog窗口DoModal模态显示时, 会将次级窗口带出闪现(比如将一个窗口active, 然后点击我现在程序需要弹框的按钮,弹出弹出正常,但原来active的 ...

  4. C语言

    HTML的学习早已落下帷幕,我们已经进入了C语言的学习,这段时间时间主要学了运算符.表达式.循环语句以及数组和字符串,感觉到了一种朦朦胧胧懂得尴尬. 运算符主要包括:算术运算符.赋值运算符.关系运算符 ...

  5. ecmall中static变量的使用-model模型代码设计

    function &m($model_name, $params = array(), $is_new = false) { static $models = array(); $model_ ...

  6. P1220 关路灯

    #include <bits/stdc++.h> using namespace std; int d[100], w[100], s, n; int dp[100][100][3]; i ...

  7. Spring mvc example

    Spring mvc example 1.下载spring源包 spring地址:http://www.springsource.org/download 我下的是spring-framework-3 ...

  8. 数值分析之奇异值分解(SVD)篇

    在很多线性代数问题中,如果我们首先思考若做SVD,情况将会怎样,那么问题可能会得到更好的理解[1].                                       --Lloyd N. ...

  9. Spark相关下载

    HBase: http://hbase.apache.org/ Hadoop hadoop.apache.org spark http://spark.apache.org/

  10. (转)struts2：数据校验，通过XWork校验框架实现（validation.xml）

    转载自:http://www.cnblogs.com/nayitian/p/3475661.html struts2:数据校验,通过XWork校验框架实现(validation.xml)   根据输入 ...