The pagination focus of angularJs is reflected in the use of filters. This filter is not complicated either.
First, add 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="">
</head>
<body>
<div ng-controller="demoCtrl">
<div>
<ul>
<li ng-repeat="sentences in demoLists[].name | paging:currentPage*listsPerPage | limitTo:listsPerPage">{{sentences}}</li> <!-- ng-repeat Dynamically generate 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)">{{num+}}</a> <!-- ng-repeat Dynamically generate page numbers -->
<a class="step nextLink" ng-click="nextPage()">Next page</a>
</div>
</div>
<script src=""></script> <!-- Introduce yours angularJs document -->
<script src=""></script>
</body>
</html>
ng-class is used here. When the current page currentPage is equal to the page number num, the style of currentStep is displayed, and when it is not equal, the style of step is displayed.
The key code is in line 13. When ng-repeat simulates data, the filter is called paging and an angular filter limitTo.
Then there is the css code, there is nothing to say, mainly to adjust the style. Remember to add 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;
}
:hover,: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;
}
Finally, it's js
var demoApp = ('demoApp',[]);
('paging',function(){ //paging filterreturn function(lists,start){ //Two parameters lists are the original data of your ng-repeat in html:// start is the parameter passed after paging, that is, currentPage*listsPerPagereturn (start); //Split the original data according to start};
});
('demoCtrl',['$scope',function($scope){ //Page Controller$ = [ //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?',
' you wanna lenrn how json works.']
}
];
$ = $[].; //Get the total number of data$ = ($/); //Display data according to each page to get the total number of pages$ = []; //Generate page number and come out in html ng-repeatfor(var i=;i<$;i++){
$(i);
}
$ = ; //Set the current page is$ = ; //Set each page to display$ = function(num){ // Function executed when clicking on page number$ = num; //Set the current page to page number}
$ = function(){ //Click on the function executed on the previous pageif($ > ){
$--;
}
}
$ = function(){ //Click on the function to execute on the next pageif ($ < $-){
$++;
}
}
}]);
I want to say that the pageNum you generate starts from 0, but the real page numbers are from the beginning, so this is why the 18 lines in html are num +1.
The above content is the code that the AngularJs implements paging function without ellipsis introduced by the editor. I hope it can help you. If you want to know more about angularjs, please pay attention to my website!