angular分页

利用angular指令实现的分页


<html>

    <head lang="zh_CN">
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript">script>
    head>
    <style>
        ul>li {
            float: left;
            list-style: none;
            border: 1px solid red;
            padding: 4px;
        }
        ul>li>a {
            text-decoration: none;
        }

        .active {
            background: orange;
        }
    style>

    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <ly-pagination page-option="option">ly-pagination>
        div>
        <script>
            var app = angular.module('myApp', []);

            app.directive('lyPagination', function() {
                return {
                    restrict: 'EA',
                    replace: true,
                    scope: {
                        option: '=pageOption'

                    },
                    template: '
    ' + '
  • ' + '{{p}}' + '
  • '
    + '
  • 共{{option.all}}页
  • '
    + '
  • 到第
  • '
    + '
'
, 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.jumpPage=function(){ if($scope.pageNum==undefined||$scope.pageNum==null){ $scope.pageNum=$scope.option.all } $scope.option.curr = $scope.pageNum $scope.option.click($scope.pageNum); $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count); } //得到显示页数的数组 $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; } else if(page == '首页') { page = 1 } else if(page == '尾页') { page = $scope.option.all } 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.push('尾页') range.unshift('«'); range.unshift("首页") return range; } } } }); app.controller('myCtrl', function($scope) { //设置分页的参数 $scope.option = { curr: 1, //当前页数 all: 20, //总页数 count: 10, //最多显示的页数,默认为10 pageNum:$scope.pageNum, //点击页数的回调函数,参数page为点击的页数 click: function(page) { console.log(page); //这里可以写跳转到某个页面等... } } });
script> body> html>

里面有个关于跳转页面获取不到pageNum的bug(暂时不影响使用),请各位大佬指点
demo大部分内容来源于https://blog.csdn.net/peakchen_90/article/details/52995773,
只是添加了一个跳转页面。

你可能感兴趣的:(angular)