angularJs 的分頁重點體現在對 過濾器 的使用。這個過濾器也並不復雜。
首先上 html 代碼：
1 <!DOCTYPE html> 2 <html ng-app="demoApp"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>demo</title> 7 <link rel="stylesheet" href="demo.css"> 8 </head> 9 <body> 10 <div ng-controller="demoCtrl"> 11 <div> 12 <ul> 13 <li ng-repeat="sentences in demoLists[0].name | paging:currentPage*listsPerPage | limitTo:listsPerPage">{{sentences}}</li> <!-- ng-repeat 動態生成模擬的數據 --> 14 </ul> 15 </div> 16 <div> 17 <a class="step prevLink" ng-click="prevPage()">上一頁</a> 18 <a ng-class="{true:'currentStep',false:'step'}[num==currentPage]" ng-repeat="num in pageNum" ng-click="setPage(num)">{{num+1}}</a> <!-- ng-repeat 動態生成頁碼 --> 19 <a class="step nextLink" ng-click="nextPage()">下一頁</a> 20 </div> 21 </div> 22 <script src="angular.min.js"></script> <!-- 引入你的 angularJs 文件 --> 23 <script src="demo.js"></script> 24 </body> 25 </html>
這里面用到了 ng-class，當前頁 currentPage 等於頁碼 num 時，顯示 currentStep 的樣式，不等於時顯示 step 的樣式。
重點代碼在 13 行，ng-repeat 模擬數據的時候加了過濾器，過濾器名字叫 paging 和一個 angular 自帶的過濾 limitTo。
然后是 css 代碼，沒有什么可說的，主要是調樣式。其中記得加上 ng-class 里的兩個樣式。
1 ul>li{ 2 list-style:none; 3 width:300px; 4 height:40px; 5 border:1px solid #4CAF50; 6 margin-bottom:4px; 7 padding-left:5px; 8 } 9 .nextLink,.prevLink{ 10 font-size: 12px; 11 line-height: 24px; 12 height: 24px; 13 border: solid 1px #aaa; 14 color: #999; 15 padding: 0 9px; 16 margin: 0 0 0 5px; 17 list-style: none; 18 background: #f2f2f2; 19 float: left; 20 cursor: pointer; 21 } 22 23 a.prevLink:hover,a.nextLink:hover { 24 background: #aaa !important; 25 color: #fff !important; 26 cursor: pointer; 27 } 28 29 .step { 30 display: block; 31 line-height: 24px; 32 height: 24px; 33 border: solid 1px #aaa; 34 color: #999; 35 background: #fff; 36 padding: 0 9px; 37 font-size: 12px; 38 float: left; 39 margin: 0 0 0 5px; 40 list-style: none; 41 cursor: pointer; 42 } 43 .currentStep{ 44 border-color: #fff; 45 padding: 0 4px; 46 color: #f90; 47 font-weight: bold; 48 float: left; 49 display: block; 50 line-height: 24px; 51 height: 24px; 52 padding: 0 9px; 53 font-size: 12px; 54 float: left; 55 margin: 0 0 0 5px; 56 list-style: none; 57 cursor: pointer; 58 }
最后就是 js 了
1 var demoApp = angular.module('demoApp',[]); 2 demoApp.filter('paging',function(){ //paging 過濾器 3 return function(lists,start){ //兩個參數 lists 是在 html 里你ng-repeat的原始數據： 4 // start 也就是 paging 后面傳的參數，即 currentPage*listsPerPage 5 return lists.slice(start); //將原始數據按照 start 分割 6 }; 7 }); 8 9 demoApp.controller('demoCtrl',['$scope',function($scope){ //頁面控制器 10 $scope.demoLists = [ //模擬數據 11 {name:['hello world','hello world again', 12 'why i say hello wrold', 13 'i dont know the reason', 14 'maybe because i am a developer.', 15 'thank you for reading this', 16 'why i say thank you', 17 'cause this stuff has nothing to do with your angularJs studying', 18 'these are just demo sentences.', 19 'Do not have any special meanings.', 20 'and you still take time to read this row by row', 21 'what could i say?', 22 'okay.maybe you wanna lenrn how json works.'] 23 } 24 ]; 25 $scope.dataNum = $scope.demoLists[0].name.length; //獲得數據總個數 26 $scope.pages = Math.ceil($scope.dataNum/3); //按照每頁顯示3個數據，得到總頁數 27 $scope.pageNum = []; //生成頁碼，在 html里 ng-repeat 出來 28 for(var i=0;i<$scope.pages;i++){ 29 $scope.pageNum.push(i); 30 } 31 32 $scope.currentPage = 0; //設置當前頁是 0 33 $scope.listsPerPage = 3; //設置每頁顯示 3 個 34 35 $scope.setPage = function(num){ // 當點擊頁碼數字時執行的函數 36 $scope.currentPage = num; //將當前頁 設置為 頁碼數 37 } 38 39 $scope.prevPage = function(){ //點擊上一頁執行的函數 40 if($scope.currentPage > 0){ 41 $scope.currentPage--; 42 } 43 } 44 $scope.nextPage = function(){ //點擊下一頁執行的函數 45 if ($scope.currentPage < $scope.pages-1){ 46 $scope.currentPage++; 47 } 48 } 49 }]);
這中間要說一下，你生成的 pageNum 是從 0 開始的，但真正的 頁碼 都是從一開始，所以這也就是 html 里 18 行是 num +1 的緣故。
頁面效果 http://plnkr.co/edit/te45WhBd0yBaE4TekxFW?p=preview
帶省略號的下次寫。什么你問為啥？鼓勵你自己思考啊。成功就在你的不遠處了。
