效果如下
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> </head> <body ng-app="myApp" ng-controller="ctr1" > <p>每页显示<input type="text" ng-model="pagenum" ng-blur="getPages(1)"/>条数 </p> <ul class="pagination"> <li ng-class="{disabled:1==page}"><a href="#" ng-click="getPages(page-1<1?1:page-1)">«</a></li> <li ng-repeat="item in pages" ng-class="{active:item==page}"><a href="#" ng-click="getPages(item)" >{{item}}</a></li> <li ng-class="{disabled:totalPages==page}"><a href="#" ng-click="getPages(page+1>totalPages?totalPages:page+1)">»</a></li> </ul> <script> var app = angular.module('myApp',[]); function getPages(currentpage,firstPage,endPage,pageNum){ console.log("f:"+firstPage); console.log("num:"+pageNum); var pages = []; var size = parseInt(firstPage)+parseInt(pageNum); console.log(size); for(var i=firstPage;i<size;i++){ pages.push(i); } console.log("pages:"+pages) return pages; } app.controller('ctr1',function($scope){ $scope.totalPages = 24; $scope.pagenum = 5 $scope.getPages = function(page){ $scope.pages = []; var firspage=0,endpage=0; if(page<$scope.pagenum){ firspage = 1; endpage = $scope.pagenum; }else{ var index = $scope.totalPages-page; if(index<($scope.pagenum-1)){ firspage = $scope.totalPages-($scope.pagenum-1); endpage = $scope.totalPages; }else{ firspage = page-(Math.ceil($scope.pagenum/2)); endpage = page+(Math.ceil($scope.pagenum/2)); } } $scope.pages = getPages(0,firspage,endpage,$scope.pagenum); $scope.page = page; console.log($scope.pages); } $scope.getPages(1); }); </script> </body> </html>
