Angularjs's paging focus is on the use of filters. This filter is also not complicated.
First on the HTML code:
<!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 = "senses in demolists []. Name | paging: CurrentPage * listsperpage | limitto: listsperpage" > {{senses}} < / Li > <! -- ng repeat dynamically generates simulated data -- >
</ul>
</div>
<div>
< a class = "step prevlink" ng Click = "prevpage()" > previous page</a>
< a ng class = "{true: 'currentstep', false: 'step'} [num = = CurrentPage]" ng repeat = "num in pagenum" ng Click = "setpage (Num)" >
< a class = "step Nextlink" ng Click = "nextpage()" > next page</a>
</div>
</div>
< script SRC = "angular. Min.js" >
<script src="demo.js"></script>
</body>
</html>
This is used Ng-class, the current page currentpage equal to page number num, display the currentstep style, not equal to show the style of step.
Key code in line 13, ng-repeat analog data added filter, filter name is called paging and a angular filter limitto.
Then there is the CSS code, there is nothing to say, mainly the tone style. Remember to add the two styles in 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;
}
The last is JS.
var demoApp = angular.module('demoApp',[]);
Demoapp. Filter ('paging ', function() {/ / paging filter
Return function (lists, start) {/ / the two parameters lists are the original data of NG repeat in HTML:
//Start is the parameter passed after paging, i.e. CurrentPage * listsperpage
Return lists. Slice (start); / / split the original data according to start
}
};
Demoapp. Controller ('democtrl ', [' $scope ', function ($scope) {/ / page controller
$scope. Demolists = [/ / simulation data
{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; / / get the total number of data
$scope. Pages = math. Ceil ($scope. Datanum /); / / display data per page to get the total number of pages
$scope. Pagenum = []; / / generate page number, and ng repeat it in HTML
for(var i=;i<$scope.pages;i++){
$scope.pageNum.push(i);
}
$scope. CurrentPage =; / / set the current page as
$scope. Listsperpage =; / / set the display of
$scope. Setpage = function (Num) {/ / the function executed when the page number is clicked
$scope. CurrentPage = num; / / set the current page to the number of pages
}
$scope. Prevpage = function() {/ / click the function executed on the previous page
if($scope.currentPage > ){
$scope.currentPage--;
}
}
$scope. NextPage = function() {/ / click the function to execute on the next page
if ($scope.currentPage < $scope.pages-){
$scope.currentPage++;
}
}
);
In the middle of that, the pagenum you generate starts at 0, but the real page numbers start at the beginning, so that's why 18 lines in HTML are num +1.
The above content is small to introduce the ANGULARJS to realize paging function without ellipsis code, hope to be able to help everyone, if you want to know more about ANGULARJS knowledge please pay attention to cloud Habitat community website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
