angularJs 的分頁重點體現在對 過濾器 的使用。這個過濾器也並不複雜。
首先上 html 代碼：
<!DOCTYPE html><html ng-app="demoApp"><head><meta charset="utf-"><meta name="viewport" content="width=device-width"><title>demo</title><link rel="stylesheet" href="demo.css"></head><body><div ng-controller="demoCtrl"><div><ul><li ng-repeat="sentences in demoLists[].name | paging:currentPage*listsPerPage | limitTo:listsPerPage">{{sentences}}</li> <!-- ng-repeat 動態產生類比的資料 --></ul></div><div><a class="step prevLink" ng-click="prevPage()">上一頁</a><a ng-class="{true:'currentStep',false:'step'}[num==currentPage]" ng-repeat="num in pageNum" ng-click="setPage(num)">{{num+}}</a> <!-- ng-repeat 動態產生頁碼 --><a class="step nextLink" ng-click="nextPage()">下一頁</a></div></div><script src="angular.min.js"></script> <!-- 引入你的 angularJs 檔案 --><script src="demo.js"></script></body></html>
這裡面用到了 ng-class，當前頁 currentPage 等於頁碼 num 時，顯示 currentStep 的樣式，不等於時顯示 step 的樣式。
重點代碼在 13 行，ng-repeat 類比資料的時候加了過濾器，過濾器名字叫 paging 和一個 angular 內建的過濾 limitTo。
然後是 css 代碼，沒有什麼可說的，主要是調樣式。其中記得加上 ng-class 裡的兩個樣式。
ul>li{list-style:none;width:px;height:px;border:px solid #CAF;margin-bottom:px;padding-left:px;}.nextLink,.prevLink{font-size: px;line-height: px;height: px;border: solid px #aaa;color: #;padding: px;margin: px;list-style: none;background: #fff;float: left;cursor: pointer;}a.prevLink:hover,a.nextLink:hover {background: #aaa !important;color: #fff !important;cursor: pointer;}.step {display: block;line-height: px;height: px;border: solid px #aaa;color: #;background: #fff;padding: px;font-size: px;float: left;margin: px;list-style: none;cursor: pointer;}.currentStep{border-color: #fff;padding: px;color: #f;font-weight: bold;float: left;display: block;line-height: px;height: px;padding: px;font-size: px;float: left;margin: px;list-style: none;cursor: pointer;}
最後就是 js 了
var demoApp = angular.module('demoApp',[]);demoApp.filter('paging',function(){ //paging 過濾器return function(lists,start){ //兩個參數 lists 是在 html 裡你ng-repeat的未經處理資料：// start 也就是 paging 後面傳的參數，即 currentPage*listsPerPagereturn lists.slice(start); //將未經處理資料按照 start 分割};});demoApp.controller('demoCtrl',['$scope',function($scope){ //頁面控制器$scope.demoLists = [ //類比資料{name:['hello world','hello world again','why i say hello wrold','i dont know the reason','maybe because i am a developer.','thank you for reading this','why i say thank you','cause this stuff has nothing to do with your angularJs studying','these are just demo sentences.','Do not have any special meanings.','and you still take time to read this row by row','what could i say?','okay.maybe you wanna lenrn how json works.']}];$scope.dataNum = $scope.demoLists[].name.length; //獲得資料總個數$scope.pages = Math.ceil($scope.dataNum/); //按照每頁顯示個資料，得到總頁數$scope.pageNum = []; //產生頁碼，在 html裡 ng-repeat 出來for(var i=;i<$scope.pages;i++){$scope.pageNum.push(i);}$scope.currentPage = ; //設定當前頁是 $scope.listsPerPage = ; //設定每頁顯示 個$scope.setPage = function(num){ // 當點擊頁碼數字時執行的函數$scope.currentPage = num; //將當前頁 設定為 頁碼數}$scope.prevPage = function(){ //點擊上一頁執行的函數if($scope.currentPage > ){$scope.currentPage--;}}$scope.nextPage = function(){ //點擊下一頁執行的函數if ($scope.currentPage < $scope.pages-){$scope.currentPage++;}}}]);
這中間要說一下，你產生的 pageNum 是從 0 開始的，但真正的 頁碼 都是從一開始，所以這也就是 html 裡 18 行是 num +1 的緣故。
以上內容是小編給大家介紹的AngularJs實現分頁功能不帶省略符號的代碼，希望能夠協助到大家，如果大家想瞭解更多有關angularjs的知識敬請關注云棲社區網站！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
