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的知識敬請關注武林網網站！
新聞熱點
疑難解答
