ANGULARJS中使用JQUERY分页控件

首篇，不知写何物，思来想去，敬上分页控件使用方法，望共同探讨。

　　分页乃前端数据展现之常用功能，而在我们使用的Angular js中，原生的分页需要将数据全部取到前端后，然后再到前端分页，在大批量数据操作时并不实用。接下来，我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法。

　　首先在web项目中引用jquery1.10、Angularjs库文件以及jq-pagination控件。

　　我降指令名称为custompagination，为指令添加Html样式。

　　

　　然后给指令添加对应的控制器。

　　

　　指令使用时，html页面代码如下

　　

　　对应控制器数据获取的方法为

　　　　　　

　　控件的最终使用效果。

　　　　

　　注意事项：jquery控件的调用更多的是使用一种同步的方式，而Angularjs获取后台数据则全部采用的是异步方式，在同时使用jquery和Angularjs时需要注意将两种不同的编程思想结合起来。在本例中最大的问题是在使用Angularjs获取后台数据后如何将新的分页情况通知给jquery分页控件，然后刷新分页控件的页面数据。本例是在Angularjs和jquery代码中各进行一次回调来实现的。其实也可以在Angularjs指令中使用watch来监视分页控件数据的变化达到刷新页面的目的，欢迎各位作进一步的探索。

赞 (0)

相关推荐

  • 教你用AngularJS框架一行JS代码实现控件验证效果

    教你用AngularJS框架一行JS代码实现控件验证效果

    如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能变为可用状态 通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码.UI样式这里采用的是Bootstrap.先上示例代码: HTML. <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp&qu

  • AngularJS实现根据不同条件显示不同控件

    AngularJS实现根据不同条件显示不同控件

    由于项目需求,需要实现根据不同条件显示不同控件的功能.具体要求如下图所示: 即当选择"每单固定减"时,下方只显示"减免金额"一栏: 当选择"每单固定折扣"时,下方只显示"折扣比例"一栏: 当选择"每单满额减"时,下方只显示"满..减.."两栏. 根据自己对angular的了解,应该可以很轻松的实现此功能. js设置控件的隐藏与显示,设置控件style的display和visibility

  • angularjs实现的前端分页控件示例

    angularjs实现的前端分页控件示例

    前言:之前写个一个jQuery的分页显示插件,存在许多的bug,现在由于业务需要,学习的一点AngularJS,重新用angularjs实现了这个分页插件 实现效果图: (效果图是加上了bootstrap的css文件) 用法: angular-pagination.js代码: /** * angularjs分页控件 * Created by CHEN on 2016/11/1. */ angular.module('myModule', []).directive('myPagination',

  • AngularJS自定义控件实例详解

    本文实例讲述了AngularJS自定义控件.分享给大家供大家参考,具体如下: 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染.比如说,内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令. 当然你也可以实现自己的.这就是 AngularJS 所谓的"教会 HTML 玩新姿势".本文将告诉你如何做到. 指令类型 可以自定义的指令类型如下: 元素 属性 CSS class Comment directives 这里面

  • AngularJS仿苹果滑屏删除控件

    AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验.Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块.本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图. 前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现.但是,有时会发现按钮影响美观,甚至影响列表行的布局.稍在网上搜索无果,而写此仿苹果滑屏删除控件. 依赖项:angularJS.jQuery 测试浏览

  • Angularjs中使用layDate日期控件示例

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指

  • 学习使用AngularJS文件上传控件

    学习使用AngularJS文件上传控件

    前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

  • AngularJS 文件上传控件 ng-file-upload详解

    网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不

  • ANGULARJS中使用JQUERY分页控件

    ANGULARJS中使用JQUERY分页控件

    首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控

  • 自己动手写的jquery分页控件(非常简单实用)

    自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo

  • jquery 分页控件实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jquery分页控

  • iOS App开发中的UIPageControl分页控件使用小结

    分页控件是一种用来取代导航栏的可见指示器,方便手势直接翻页,最典型的应用便是iPhone的主屏幕,当图标过多会自动增加页面,在屏幕底部你会看到原点,用来只是当前页面,并且会随着翻页自动更新. 一.创建 复制代码 代码如下: UIPageControl* myPageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0.0, 400.0, 320.0, 0.0)]; 二.设置属性 页面数目 复制代码 代码如下: myPageContr

  • 基于Bootstrap仿淘宝分页控件实现代码

    基于Bootstrap仿淘宝分页控件实现代码

    大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破 一.淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺

  • 基于jQuery的实现简单的分页控件

    基于jQuery的实现简单的分页控件

    1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla

  • asp.net中使用自定义控件的方式实现一个分页控件的代码

    asp.net中使用自定义控件的方式实现一个分页控件的代码

    一.概述 在web开发中,常常需要显示一些数据,而为了方便排版及浏览,我们只需要显示所有记录中的一部分.一般情况下,我们采用分页来实现这个需求.实现分页的方法多种多样,在本文中,我们采用了一个分页空间来记录记录总数.当前页.总页数及页面大小等.为了有一个直观上的印象,先展示该控件运行后的效果,效果如下图所示: 二.实现方案 为了实现该效果图,在asp.net中,可以使用Custom Controls and User Controls两种方式,User Controls的实现方式及其简单,而且使

  • Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）

    Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) 先给大家展示下效果图: [功能] 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition pro

随机推荐