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 相关文章推荐
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
一些.net面试题
2014/10/06 面试题
上课睡觉检讨书
2014/01/28 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Android中View.post和Handler.post的关系
2022/06/05 Java/Android