angular.js分頁(yè)代碼的實(shí)例
對(duì)于大多數(shù)web應(yīng)用來(lái)說(shuō)顯示項(xiàng)目列表是一種很常見(jiàn)的任務(wù)。通常情況下,我們的數(shù)據(jù)會(huì)比較多,無(wú)法很好地顯示在單個(gè)頁(yè)面中。在這種情況下,我們需要把數(shù)據(jù)以頁(yè)的方式來(lái)展示,同時(shí)帶有轉(zhuǎn)到上一頁(yè)和下一頁(yè)的功能?,F(xiàn)在在學(xué)習(xí)angular,使用angularjs 分頁(yè),基于 directive 實(shí)現(xiàn),樣式使用的 bootstrap,直接在 html代碼中加入 標(biāo)簽即可調(diào)用。
先來(lái)看下效果圖
實(shí)例代碼
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> 頁(yè)</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 : '首頁(yè)', style : $scope.pageId == 1 ? "disabled" : "", link : $scope.getLink(1) }); page.push({ name : '上一頁(yè)', 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 : '下一頁(yè)', style : $scope.pageId == $scope.pageCount ? "disabled" : "", link : $scope.getLink($scope.pageCount) }); page.push({ name : '尾頁(yè)', 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分頁(yè)代碼的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
- ANGULARJS中使用JQUERY分頁(yè)控件
- angularjs表格分頁(yè)功能詳解
- AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息
- 學(xué)習(xí)Angularjs分頁(yè)指令
- 基于Angularjs實(shí)現(xiàn)分頁(yè)功能
- AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁(yè)實(shí)例代碼
- AngularJs實(shí)現(xiàn)分頁(yè)功能不帶省略號(hào)的代碼
- Angularjs 實(shí)現(xiàn)分頁(yè)功能及示例代碼
- 利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)(代碼加簡(jiǎn)單)
相關(guān)文章
AngularJS2中一種button切換效果的實(shí)現(xiàn)方法(二)
這篇文章主要介紹了AngularJS2中一種button切換效果的實(shí)現(xiàn)方法(二),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包詳解
基于流的前端自動(dòng)化構(gòu)建工具,利用gulp可以提高前端開(kāi)發(fā)效率,特別是在前后端分離的項(xiàng)目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包的相關(guān)資料,需要的朋友可以參考下。2017-07-07Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入3
這篇文章主要為大家詳細(xì)介紹了AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入第三篇,感興趣的小伙伴們可以參考一下2016-08-08AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載
這篇文章主要介紹了AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載的相關(guān)資料,需要的朋友可以參考下2017-07-07AngularJs ng-route路由詳解及實(shí)例代碼
這篇文章主要介紹了AngularJs ng-route路由,這里整理相關(guān)資料及簡(jiǎn)單實(shí)例代碼,有興趣的小伙伴可以參考下2016-09-09AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-093個(gè)可以改善用戶體驗(yàn)的AngularJS指令介紹
這篇文章主要介紹了3個(gè)可以改善用戶體驗(yàn)的AngularJS指令,AngularJS是一款具有很高人氣的JavaScript框架,需要的朋友可以參考下2015-06-06