DDR爱好者之家

angularjs实现的前端分页控件示例
站长资源 2024/11/28 佚名
60 1538
DDR爱好者之家 Design By 杰米

前言：之前写个一个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">' +
    '<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="/UploadFiles/2021-04-02/angular.min.js">


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);
      //这里可以写跳转到某个页面等...
    }
  }
});







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米