AngularJs實現(xiàn)分頁功能不帶省略號的代碼

更新時間：2016年05月30日 11:38:27 作者：李佳怡

這篇文章主要介紹了AngularJs實現(xiàn)分頁功能不帶省略號的代碼的相關資料，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧

angularJs 的分頁重點體現(xiàn)在對過濾器的使用。這個過濾器也并不復雜。

首先上 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 動態(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)站！

您可能感興趣的文章:

AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
淺談Angular7 項目開發(fā)總結
這篇文章主要介紹了淺談Angular7 項目開發(fā)總結，本文在此做一次遇到問題的總結，以便知識的掌握，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
AngularJS通過$location獲取及改變當前頁面的URL
本篇將介紹AngularJS中的$location服務的基本用法,$location服務的主要作用是用于獲取當前url以及改變當前的url,并且存入歷史記錄。本文通過示例代碼介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-09-09
如何在Angular.JS中接收并下載PDF
最近這兩天公司正在做一個PDF協(xié)議下載的功能，目前的解決方案可以分為完全前端生成和后端生成兩種方式。前端生成PDF有jsPDF 和pdfmake 兩種方式，下面這篇文章就給大家分享下如何在Angular.JS中接收并下載PDF的方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-11-11
Angular實現(xiàn)表格自滾動效果
這篇文章主要為大家介紹了如何通過Angular實現(xiàn)表格自動滾動的效果，文中的示例代碼講解詳細，對我們學習Angular有一定幫助，需要的可以參考一下
2022-01-01
AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能,結合完整實例形式分析了AngularJS隨機數(shù)生成與數(shù)值判定相關操作技巧,需要的朋友可以參考下
2017-12-12
Angular.Js中ng-include指令的使用與實現(xiàn)
ng-include 指令用于包含外部的 HTML 文件。包含的內容將作為指定元素的子節(jié)點。下面這篇文章主要給大家介紹了Angular.Js中ng-include指令的使用與實現(xiàn)的相關資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。
2017-05-05
angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
angularjs手動識別字符串中的換行符方法
今天小編就為大家分享一篇angularjs手動識別字符串中的換行符方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
詳解Angular2 關于*ngFor 嵌套循環(huán)
這篇文章主要介紹了詳解Angular2 關于*ngFor 嵌套循環(huán)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05