AngularJS directive 实现分页包装指令

最新推荐文章于 2024-12-21 16:19:44 发布

rodbate

最新推荐文章于 2024-12-21 16:19:44 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： directive 分页-java

本文链接：https://blog.youkuaiyun.com/rodbate/article/details/50357774

angularjs 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用AngularJS创建一个自定义分页指令，包括HTML模板和JavaScript逻辑，旨在方便用户理解和实现分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS directive 分页指令

写这篇文章的主要目的是为了记录自己的学习过程，方便以后查看，当然也希望有人指点一二，互相学习。

一些angularjs directive的基础知识就不说了，直接上代码。

首先是myPagination.html

myPagination.html

<div>
    <nav class="pull-right">
        <ul class="pagination pagination-sm">

            <li ng-class="{true:'active'}[pageObject.currentPage==1]">
                <a href="javascript:void(0)" ng-click="showFirstPage(1)">&laquo;</a>
            </li>

            <li ng-class="{true:'disabled'}[pageObject.currentPage==1]">
                <a href="javascript:void(0);" ng-click="upPageClick(pageObject.currentPage-1)">&lsaquo;</a>
            </li>

            <li ng-repeat="page in pageObject.pages" ng-class="{true:'active',false:'inactive'}[pageObject.currentPage==page]">
                <a href="javascript:void(0);" ng-click="showCurrentPage(page)">{{page}}</a>
            </li>

            <li ng-class="{true:'disabled'}[pageObject.currentPage==pageObject.totalPage]">
                <a href="javascript:void(0);" ng-click="downPageClick(pageObject.currentPage+1)">&rsaquo;</a>
            </li>

            <li ng-class="{true:'active'}[pageObject.currentPage==pageObject.totalPage]">
                <a href="javascript:void(0)" ng-click="showLastPage(pageObject.totalPage)">&raquo;</a>
            </li>

        </ul>
    </nav>
</div>

diretive 内容

myPagination.js



    angular.module.factory('myPaginationService',function(){


            var getPageData = function(pageObject,page){
                pageObject.currentPage = page;
                if (pageObject.currentPage > 1 && pageObject.currentPage < pageObject.totalPage) {
                     pageObject.pages = [
                         pageObject.currentPage - 1,
                         pageObject.currentPage,
                         pageObject.currentPage + 1
                     ];
                } else if (pageObject.currentPage == 1 && pageObject.totalPage == 1) {
                    pageObject.pages = [
                        1
                    ];
                } else if (pageObject.currentPage == 1 && pageObject.totalPage == 2) {
                    pageObject.pages = [
                        1,2
                    ];
                } else if (pageObject.currentPage == 1 && pageObject.totalPage > 2) {
                    pageObject.pages = [
                        pageObject.currentPage,
                        pageObject.currentPage + 1,
                        pageObject.currentPage + 2
                    ];
                } else if (pageObject.currentPage == pageObject.totalPage && pageObject.totalPage == 1) {
                    pageObject.pages = [
                        1
                    ];
                } else if (pageObject.currentPage == pageObject.totalPage && pageObject.totalPage == 2) {
                    pageObject.pages = [
                        1,2
                    ];
                } else if (pageObject.currentPage == pageObject.totalPage && pageObject.totalPage > 2) {
                    pageObject.pages = [
                        pageObject.currentPage - 2,
                        pageObject.currentPage - 1,
                        pageObject.currentPage
                    ];
                }
            };

            var service = {

                upPageClick: function(pageObject,page){
                    if(pageObject.currentPage == 1){
                        return;
                    };
                    pageObject.currentPage --;
                    getPageData(pageObject,page);
                },

                downPageClick: function(pageObject,page){
                    if(pageObject.currentPage >= pageObject.totalPage){
                        return;
                    };
                    pageObject.currentPage ++;
                    getPageData(pageObject,page);
                },

                showFirstPageContent: function(pageObject,page){
                    pageObject.currentPage = 1;
                    getPageData(pageObject,page);
                },

                showLastPageContent: function(pageObject,page){
                    pageObject.currentPage = pageObject.totalPage;
                    getPageData(pageObject,page);
                },

                showCurrentPageContent: function(pageObject,page){
                    pageObject.currentPage = page;
                    getPageData(pageObject,page);
                }
            };
            return service;
    });


    angular.module.directive('myPagination',function(myPaginationService){
        return {
            restrict: 'A',
            replace: true,
            scope: {
                pageObject:'='
            },
            templateUrl: 'myPagination.html',
            link: function(scope,element,attrs){
                scope.upPageClick = function(page){
                    myPaginationService.upPageClick(scope.pageObject,page);
                    //console.log(scope.pageObject.currentPage);
                };
                scope.downPageClick = function(page){
                    myPaginationService.downPageClick(scope.pageObject,page);
                    //console.log(scope.pageObject.currentPage);
                };
                scope.showFirstPage = function(page){
                    myPaginationService.showFirstPageContent(scope.pageObject,page);
                    //console.log(scope.pageObject.currentPage);
                };
                scope.showLastPage = function(page){
                    myPaginationService.showLastPageContent(scope.pageObject,page);
                    console.log(scope.pageObject.currentPage);
                };
                scope.showCurrentPage = function(page){
                    myPaginationService.showCurrentPageContent(scope.pageObject,page);
                    //console.log(scope.pageObject.currentPage);
                };
            }
        };
    });

})

前台页面调用

<div my-pagination page-object="userPageObject"></div>

与Java后台交互

        //查询用户，并分页显示
          $scope.userPageObject={
                currentPageList: [], //当前页面显示的数据列表
                currentPage: 1, //当前页，初始化为1
                totalPage: 0, //总页数
                pageSize: 10, //页面大小
                pages:[] //前台页面按钮显示内容
          };

          $scope.userSelect = {};
          $scope.getAllUser=function(){
              $scope.userSearch = {
                  params:{
                      pageSize:$scope.userPageObject.pageSize,
                      currentPage:$scope.userPageObject.currentPage,

                  }
              };
              $http.get("/api/user",$scope.userSearch).success(function(data,status,headers){
                  $scope.userPageObject.totalPage = headers('Page-Count');
                                    $scope.userPageObject.currentPageList=data;
              }).error(function(err){
                  $scope.users=[];
                  console.log(err);
              });
          };
          $scope.getAllUser();

          $scope.init = function(){
              $scope.getAllUser();
              $scope.$watch('userPageObject.totalPage',function(){myPaginationService.showFirstPageContent($scope.userPageObject,1);});
          };
          $scope.init();
          $scope.$watch('userPageObject.currentPage',function(){$scope.getAllUser();});
    })
});