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 相关文章推荐
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Vue extend的基本用法(实例详解)
Dec 09 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php缓冲输出实例分析
2015/01/05 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
党委书记岗位职责
2013/11/24 职场文书
大专生自我评价
2014/01/28 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
小学班主任事迹材料
2014/12/17 职场文书
五年级上册复习计划
2015/01/19 职场文书
警示教育片观后感
2015/06/17 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript