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


Posted in Javascript onFebruary 10, 2017

前言:之前写个一个jQuery的分页显示插件,存在许多的bug,现在由于业务需要,学习的一点AngularJS,重新用angularjs实现了这个分页插件

实现效果图:

(效果图是加上了bootstrap的css文件)

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

用法:

angular-pagination.js代码:

/**
 * angularjs分页控件
 * Created by CHEN on 2016/11/1.
 */

angular.module('myModule', []).directive('myPagination', function () {
  return {
    restrict: 'EA',
    replace: true,
    scope: {
      option: '=pageOption'
    },
    template: '<ul class="pagination">' +
    '<li ng-click="pageClick(p)" ng-repeat="p in page" class="{{option.curr==p?\'active\':\'\'}}">' +
    '<a href="javascript:;" rel="external nofollow" >{{p}}</a>' +
    '</li>' +
    '</ul>',
    link: function ($scope) {
      //容错处理
      if (!$scope.option.curr || isNaN($scope.option.curr) || $scope.option.curr < 1) $scope.option.curr = 1;
      if (!$scope.option.all || isNaN($scope.option.all) || $scope.option.all < 1) $scope.option.all = 1;
      if ($scope.option.curr > $scope.option.all) $scope.option.curr = $scope.option.all;
      if (!$scope.option.count || isNaN($scope.option.count) || $scope.option.count < 1) $scope.option.count = 10;


      //得到显示页数的数组
      $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);

      //绑定点击事件
      $scope.pageClick = function (page) {
        if (page == '«') {
          page = parseInt($scope.option.curr) - 1;
        } else if (page == '»') {
          page = parseInt($scope.option.curr) + 1;
        }
        if (page < 1) page = 1;
        else if (page > $scope.option.all) page = $scope.option.all;
        //点击相同的页数 不执行点击事件
        if (page == $scope.option.curr) return;
        if ($scope.option.click && typeof $scope.option.click === 'function') {
          $scope.option.click(page);
          $scope.option.curr = page;
          $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);
        }
      };

      //返回页数范围(用来遍历)
      function getRange(curr, all, count) {
        //计算显示的页数
        curr = parseInt(curr);
        all = parseInt(all);
        count = parseInt(count);
        var from = curr - parseInt(count / 2);
        var to = curr + parseInt(count / 2) + (count % 2) - 1;
        //显示的页数容处理
        if (from <= 0) {
          from = 1;
          to = from + count - 1;
          if (to > all) {
            to = all;
          }
        }
        if (to > all) {
          to = all;
          from = to - count + 1;
          if (from <= 0) {
            from = 1;
          }
        }
        var range = [];
        for (var i = from; i <= to; i++) {
          range.push(i);
        }
        range.push('»');
        range.unshift('«');
        return range;
      }

    }
  }
});

index.html代码:

<!doctype html>
<html ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Angularjs分页控件</title>
  <script src="angular.min.js"></script> <!-- 引入angularjs文件,而且是1.x版本的 -->
  <script src="angular-pagination.js"></script> <!-- 引入angularjs分页控件 -->
  <script src="app.js"></script> <!-- 引入app.js -->
</head>
<body>

<!-- 控制器 -->
<div ng-controller="myCtrl">

  <!-- 分页控件指令 ,可以是元素 或者 属性 -->
  <my-pagination page-option="option"></my-pagination>

</div>

</body>
</html>

app.js代码:

//引入 'myModele' 模块
var app = angular.module('app', ['myModule']);

app.contriller('myCtrl', function($scope){

  //设置分页的参数
  $scope.option = {
    curr: 1, //当前页数
    all: 20, //总页数
    count: 10, //最多显示的页数,默认为10

    //点击页数的回调函数,参数page为点击的页数
    click: function (page) {
      console.log(page);
      //这里可以写跳转到某个页面等...
    }
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取input点选按钮的值的方法
Apr 14 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 #Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 #Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 #Javascript
jQuery排序插件tableSorter使用方法
Feb 10 #Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 #Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 #Javascript
BootStrapValidator初使用教程详解
Feb 10 #Javascript
You might like
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python opencv肤色检测的实现示例
2020/12/21 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
高考自主招生自荐信
2013/10/20 职场文书
老师自我鉴定范文
2013/12/25 职场文书
给交警的表扬信
2014/01/12 职场文书
人事部专员岗位职责
2014/03/04 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
会计员岗位职责
2014/03/15 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
法制宣传日活动总结
2014/04/29 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
班主任2015新年寄语
2014/12/08 职场文书
毕业赠语大全
2015/06/23 职场文书