angular.js分頁代碼的實例
更新時間：2016年07月27日 10:11:26 投稿：daisy
本文用實例詳細給大家展示了angular.js分頁代碼，代碼很詳細，感興趣的小伙伴們可以參考一下
對于大多數(shù)web應(yīng)用來說顯示項目列表是一種很常見的任務(wù)。通常情況下，我們的數(shù)據(jù)會比較多，無法很好地顯示在單個頁面中。在這種情況下，我們需要把數(shù)據(jù)以頁的方式來展示，同時帶有轉(zhuǎn)到上一頁和下一頁的功能?，F(xiàn)在在學(xué)習(xí)angular，使用angularjs 分頁，基于 directive 實現(xiàn)，樣式使用的 bootstrap，直接在 html代碼中加入 標簽即可調(diào)用。
先來看下效果圖
實例代碼
app.directive('pagePagination', function(){
return {
restrict : 'E',
template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><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();
}]
}
});
調(diào)用代碼：
<page-pagination page-id="pageId" page-record="recordCount" page-url-template="urlTemplate"> </page-pagination>
以上就是angular.js分頁代碼的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個核心概念，但是有時候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細說明的相關(guān)資料,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了angular中的cookie讀寫方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于Angular利用HTTP POST下載流文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
解析AngularJS中g(shù)et請求URL出現(xiàn)的跨域問題
本文主要介紹了AngularJS中g(shù)et請求URL出現(xiàn)跨域問題。需要的朋友可以參考下2016-12-12
這篇文章主要介紹了詳解Angular5 路由傳參的3種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了淺談angular4實際項目搭建總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Angular.js與node.js項目里用cookie校驗賬戶登錄詳解
這篇文章主要介紹了Angular.js與node.js項目里用cookie校驗賬戶登錄的相關(guān)資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11
本篇文章主要介紹了Angularjs單選框相關(guān)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
利用angular自動編譯andriod APK的繞坑經(jīng)歷分享
這篇文章主要給大家介紹了關(guān)于如何利用angular自動編譯andriod APK的繞坑經(jīng)歷，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03