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 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 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的知識敬請關注武林網網站！