angular.js分頁代碼的實例

對於大多數web應用來說顯示項目列表是一種很常見的任務。通常情況下，我們的數據會比較多，無法很好地顯示在單個頁面中。在這種情況下，我們需要把數據以頁的方式來展示，同時帶有轉到上一頁和下一頁的功能。現在在學習angular，使用angularjs 分頁，基於directive 實現，樣式使用的bootstrap，直接在html代碼中加入標籤即可調用。

先來看下效果圖

實例代碼

app.directive('pagePagination', function(){ return { restrict : 'E', template : '<div><ul><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul ng-if="pageList[0]"><li><span>共<b>{{ pageRecord }}</b> 條記錄/ 共<b>{{ pageCount }}</b> 頁</span></li></ul></div>', replace : true, scope : { "pageId" : "=", "pageRecord" : "=", "pageSize" : "=", "pageUrlTemplate" : "=" }, controller : ['$scope', function($scope){ $scope.getLink = function(pageId){ return $scope.pageUrlTemplate.replace("{PAGE}", pageId); }; $scope.getPageList = function(){ var page = []; var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1; page.push({ name : '首頁', style : $scope.pageId == 1 ? "disabled" : "", link : $scope.getLink(1) }); page.push({ name : '上一頁', style : $scope.pageId == 1 ? "disabled" : "", link : $scope.getLink(1) }); for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){ if( pageId >= 1 && pageId <= $scope.pageCount ){ page.push({ name : pageId, link : $scope.getLink(pageId), style : pageId == $scope.pageId ? "active" : "" }); } } page.push({ name : '下一頁', style : $scope.pageId == $scope.pageCount ? "disabled" : "", link : $scope.getLink($scope.pageCount) }); page.push({ name : '尾頁', style : $scope.pageId == $scope.pageCount ? "disabled" : "", link : $scope.getLink($scope.pageCount) }); return page; }; $scope.pageInit = function(){ if( !$scope.pageId || !$scope.pageRecord ){ setTimeout(function(){ $scope.$apply(function(){ $scope.pageInit(); }); }, 10); }else{ if( !!$scope.pageSize ){ $scope._pageSize = parseInt($scope.pageSize); }else{ $scope._pageSize = 10; } $scope.pageId = parseInt($scope.pageId); $scope.pageCount = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1; if( $scope.pageId < 1 ){ $scope.pageId = 1; }else if( $scope.pageId > $scope.pageCount ){ $scope.pageId = $scope.pageCount; } $scope.pageLoad = true; $scope.pageList = $scope.getPageList(); } }; $scope.pageLoad = false; $scope.pageInit(); }] }});

調用代碼：

 <page-pagination page-id="pageId" page-record="recordCount" page-url-template="urlTemplate"></page-pagination>

以上就是angular.js分頁代碼的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。