directives.js 6.38 KB
/**
 * Created by DEV005 on 2015/8/21.
 * gaoxin
 */


angular.module("xn.directive.pagination", ["xn/template/pagination/page.html"])
    .directive("xnPagination",[ "$timeout", function ($timeout) {
        return {
            restrict: "AC",
            templateUrl: "xn/template/pagination/templates.html",
            scope: {
                vm: '=ngModel',
                onChange: '&'
            },
            replace: true,
            require: "?ngModel",
            link: function (scope, elem, attrs, ngModel) {
                if (!ngModel) return;
                scope.disabled={
                    isFirst:false,
                    isLast :false
                };

                scope.$watch("vm.totalCount", function () {
                    scope.vm.pageSize = parseInt(scope.vm.pageSize);
                    scope.vm.totalPageNum = Math.ceil(scope.vm.totalCount / scope.vm.pageSize);
                });

                 //监控当前页数判断是否是第一页或者最后一页
                scope.$watch("vm.pageNumber", function () {
                    var maxPage = Math.ceil(scope.vm.totalCount / scope.vm.pageSize);
                    if (scope.vm.pageNumber == 1) {
                        scope.disabled.isFirst = true;
                    }
                    else {
                        scope.disabled.isFirst = false;
                    }
                    if (scope.vm.pageNumber == maxPage) {
                        scope.disabled.isLast = true;
                    } else {
                        scope.disabled.isLast = false;
                    }

                });

                //改变页面显示条数
                scope.changePageSize = function () {
                    var ifNum = /^[1-9]\d*$/;
                    if (ifNum.test(scope.vm.pageSize)) {
                        scope.vm.totalPageNum = Math.ceil(scope.vm.totalCount / scope.vm.pageSize);

                    } else {
                        scope.vm.pageSize = 1;
                    }
                    scope.vm.pageNumber = 1;
                    //$timeout(function () {
                    //    scope.changePageSize();
                    //
                    //},850);

                    scope.onChange();
                };

                //改变当前页码
                scope.changePageNum = function (choice) {
                    if (scope.vm.pageSize == "") {
                        scope.vm.pageSize = 10;
                    }
                    var maxPage = Math.ceil(scope.vm.totalCount / scope.vm.pageSize);

                    if(scope.vm.pageNumber > maxPage || scope.vm.pageNumber <= 0){
                        scope.vm.pageNumber=1;
                    }
                    //转到第一页
                    if ("first" == choice) {
                        if (scope.vm.pageNumber == 1) {

                        } else {
                            scope.vm.pageNumber = 1;

                        }
                        scope.onChange();
                    }
                    //转到上一页
                    if ("previous" == choice) {
                        if (scope.vm.pageNumber == 1) {
                            scope.disabled.isFirst=true;
                        }else{
                            scope.vm.pageNumber = scope.vm.pageNumber - 1;

                        }
                        scope.onChange();
                    }
                    if ("current" == choice) {

                    }
                    //转到下一页
                    if ("next" == choice) {
                        if (scope.vm.pageNumber < maxPage) {
                            scope.vm.pageNumber = scope.vm.pageNumber + 1;


                        } else {
                            scope.disabled.isLast=true;
                        }
                        scope.onChange();
                    }
                    //转到最后一页
                    if ("last" == choice) {
                        if (scope.vm.pageNumber == maxPage) {
                            scope.disabled.isLast=true;
                        }else{
                            scope.vm.pageNumber = maxPage;
                        }

                        scope.onChange();
                    }

                };

            }
        };

    }]);


angular.module("xn/template/pagination/page.html", []).run(["$templateCache", function ($templateCache) {
    "use strict";
    $templateCache.put("xn/template/pagination/templates.html",
        "<div class=\"xn-directive-page\" >" +
            "<div class=\"f-left pl-25\">" +
                "<span class=\" pr-10\">显示</span>" +
                    "<input type=\"text\" class=\"form-control w-50 f-left text-center input-box\" ng-model =\"vm.pageSize\" ng-change=\"changePageSize() \">" +
                "<span class=\"pl-10\">条</span>" +
            "</div>" +
            "<div class=\"f-left\">" +
                "<span class=\"f-left pl-10 pr-10\">共</span>" +
                "<span class='text-center'>{{vm.totalCount}}</span>" +
                "<span class=\"pl-10\">条</span>" +
            "</div>" +
            "<div class=\"f-right pagination-right pr-25\">" +
                "<span class=\"f-left  pr-10\">" +
                    "<i class=\"pagination-ico arrow-first\" ng-click=\"changePageNum('first')\" ng-class=\"disabled.isFirst?'disablei':''\"></i>" +
                 "</span>" +
                 "<span class=\"f-left  pr-10 forward\">" +
                     "<i class=\"pagination-ico arrow-left\" ng-click=\"changePageNum('previous')\" ng-class=\"disabled.isFirst?'disablei' :''\"></i>" +
                 "</span>" +
                 "<span class=\"f-left  pr-10\">第</span>" +
                     "<input type=\"text\" class=\"form-control w-50 f-left text-center input-box\" ng-model=\"vm.pageNumber\" ng-change=\"changePageNum('current')\">" +
                 "<span class=\"pl-10 f-left\">页</span>" +
                 "<span class=\"pl-10 back f-left\">" +
                    "<i class=\" pagination-ico arrow-right\" ng-click=\"changePageNum('next')\"  ng-class=\"disabled.isLast?'disablei':''\"></i>" +
                 "</span>" +
                 "<span class=\"pl-10  f-left\">" +
                    "<i class=\"pagination-ico arrow-last\" ng-click=\"changePageNum('last')\" ng-class=\"disabled.isLast?'disablei':''\"></i>" +
                 "</span>" +
            "</div>" +
        "</div> "
    );
}]);