自定義指令

import angular from 'angular';/*** @ngdoc module* @name components.page* @description 分頁directive*/ export default angular.module('pageDirective', []).directive('ngPage', function () {return {restrict: 'E',scope: {totalCount: '=',pageSize: '=',param: '=',pageItmes: '=',currentPage: '=',goPage: '&',showMaxPage: '@',GO: '@'},controller: controller,template: templateFunction}function controller($scope, $element, $attrs) {var size = 0;$scope.$watch('pageSize', function (nvalue, ovalue) {size = parseInt(nvalue);if (typeof(ovalue) !== 'undefined') {$scope.currentPage = parseInt(($scope.currentPage - 1) * Number(ovalue) / size) + 1;}$scope.totalPage = getTotalPages();});//計算總頁數var getTotalPages = function () {return Math.ceil($scope.totalCount / size);};//監控總記錄條數是否發生變化，如改變，需要重新計算頁數$scope.$watch('totalCount', function () {$scope.totalPage = getTotalPages();if ($scope.totalPage == undefined || isNaN($scope.totalPage)) {$scope.totalPage = 1}});//監控總頁數，調整展示頁碼$scope.$watch('totalPage', function () {$scope.pages = getPages($scope.totalPage, $scope.currentPage);});//監控跳轉的頁數只能為數字$scope.$watch('GO', function () {var re = /[^\d]/g;if ($scope.GO !== '' && !re.test($scope.GO) && $scope.GO > 0) {$scope.pages = getPages($scope.totalPage, $scope.currentPage);} else {$scope.GO = '';}});//監控當前頁，然后調整展示頁碼$scope.$watch('currentPage', function () {// debugger;$scope.pages = getPages($scope.totalPage, $scope.currentPage);});//跳轉到某一頁$scope.setCurrentPage = function (pageno) {if (pageno === '...' || pageno === 0 || pageno > $scope.totalPage || pageno === '') {return;}$scope.currentPage = pageno;$scope.param.page.currentPage = pageno;$scope.goPage($scope.param);$scope.GO = '';};//每頁顯示size改變$scope.changeSize = function () {$scope.param.page = {currentPage: 1,pageSize: $scope.pageSize};$scope.goPage($scope.param);};var getPages = function (totalPage, currentPage) {var pages = [];currentPage = parseInt(currentPage);totalPage = parseInt(totalPage);if (totalPage === 0) {pages.push(1);}//總頁數<最大展示頁數：展示全部else if (totalPage <= $attrs.showMaxPage) {for (var i = 1; i <= totalPage; i++) {pages.push(i);}}//當前頁靠近首頁前4頁，顯示：首頁前4頁，..., 尾頁后2頁else if (totalPage > $attrs.showMaxPage && currentPage <= 4) {pages.push(1);pages.push(2);pages.push(3);pages.push(4);pages.push("...");pages.push(totalPage - 1);pages.push(totalPage);}// 當前頁靠近尾頁后4頁，顯示else if (totalPage > $attrs.showMaxPage && (totalPage - currentPage) < 4) {pages.push(1);pages.push(2);pages.push("...");pages.push(totalPage - 3);pages.push(totalPage - 2);pages.push(totalPage - 1);pages.push(totalPage);}//當前頁既不靠近首頁前4頁也不靠近尾頁后4頁，else {pages.push(1);pages.push(2);pages.push("...");pages.push(currentPage - 1);pages.push(currentPage);pages.push(currentPage + 1);pages.push("...");pages.push(totalPage);}return pages;};}function templateFunction() {return '<nav>' +'<ul class="pagination pagination-sm" style="font-size:15px;">' +'<li><a ng-click="setCurrentPage(currentPage-1)" style="font-size:13px;">&laquo;</a></li>' +'<li ng-class="{active: pageno == currentPage}" ng-repeat="pageno in pages" style="font-size:13px;">' +'<a ng-click="setCurrentPage(pageno)">{{pageno}}</a></li>' +'<li><a ng-click="setCurrentPage(currentPage-0+1)" style="font-size:13px;">&raquo;</a></li>' +'<li><span>每頁' +'<select ng-model="pageSize" ng-change="changeSize()" style="width: 55px;" ng-options="item for item in pageItmes">' +'</select></span>' +'</li>' +'<li><span><input type="text" style="width: 30px;" ng-model="GO"/></span></li>' +'<li><a ng-disabled="false" class="ng-binding" ng-click="setCurrentPage(GO)">GO</a></li>' +'</ul>' +'</nav>';} }).name;

頁面中調用

<page-directive total-count="param.page.totalCount" page-size="param.page.pageSize" param="param"page-itmes="param.selectCount" show-max-page="9" current-page="param.page.currentPage"go-page="queryList(param.page.currentPage)"></page-directive>

頁面中獲取數據的方法是queryList，go-page的時候把currentpage作為傳遞過去即可發送請求，取得想要的結果。

controller中需要傳入初始化的數據

//初始化分頁信息 $scope.param = {selectCount: [5, 10, 15],page: {currentPage: 1,pageSize: 5} };

?

轉載于:https://www.cnblogs.com/iagw/p/6863752.html

總結

以上是生活随笔為你收集整理的angularjs中的分页指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。