<!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 動態(tài)生成模擬的數(shù)據(jù) -->
</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 動態(tài)生成頁碼 -->
<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 模擬數(shù)據(jù)的時候加了過濾器，過濾器名字叫 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){ //兩個參數(shù) lists 是在 html 里你ng-repeat的原始數(shù)據(jù)：
// start 也就是 paging 后面?zhèn)鞯膮?shù)，即 currentPage*listsPerPage
return lists.slice(start); //將原始數(shù)據(jù)按照 start 分割
};
});
demoApp.controller('demoCtrl',['$scope',function($scope){ //頁面控制器
$scope.demoLists = [ //模擬數(shù)據(jù)
{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; //獲得數(shù)據(jù)總個數(shù)
$scope.pages = Math.ceil($scope.dataNum/); //按照每頁顯示個數(shù)據(jù)，得到總頁數(shù)
$scope.pageNum = []; //生成頁碼，在 html里 ng-repeat 出來
for(var i=;i<$scope.pages;i++){
$scope.pageNum.push(i);
}
$scope.currentPage = ; //設置當前頁是 
$scope.listsPerPage = ; //設置每頁顯示 個
$scope.setPage = function(num){ // 當點擊頁碼數(shù)字時執(zhí)行的函數(shù)
$scope.currentPage = num; //將當前頁 設置為 頁碼數(shù)
}
$scope.prevPage = function(){ //點擊上一頁執(zhí)行的函數(shù)
if($scope.currentPage > ){
$scope.currentPage--;
}
}
$scope.nextPage = function(){ //點擊下一頁執(zhí)行的函數(shù)
if ($scope.currentPage < $scope.pages-){
$scope.currentPage++;
}
}
}]);

這中間要說一下，你生成的 pageNum 是從 0 開始的，但真正的頁碼都是從一開始，所以這也就是 html 里 18 行是 num +1 的緣故。

以上內容是小編給大家介紹的AngularJs實現(xiàn)分頁功能不帶省略號的代碼，希望能夠幫助到大家，如果大家想了解更多有關angularjs的知識敬請關注腳本之家網(wǎng)站！

您可能感興趣的文章: