The pagination focus of angularJs is reflected in the use of filters. This filter is not complicated either.
First, put 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="sentences in demoLists[].name | paging:currentPage*listsPerPage | limitTo:listsPerPage">{{sentences}}</li> <!-- ng-repeat Dynamically generate simulated data --></ul></div><div><a 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 ng-click="nextPage()">Next page</a></div></div><script src="angular.min.js"></script> <!-- Introduce your angularJs file --><script src="demo.js"></script></body></html>ng-class is used here. When the current page currentPage is equal to the page number num, the currentStep style is displayed, and when it is not equal, the step style is displayed.
The key code is in 13 lines. 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;}a.prevLink:hover,a.nextLink:hover {background: #aaa !important;color: #ffff !important;cursor: pointer;}.step {display: block;line-height: px;height: px;border: solid px #aaa;color: #;background: #ffff;padding: px;font-size: px;float: left;margin: px;list-style: none;cursor: pointer;}.currentStep{border-color: #ffff;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 = angular.module('demoApp',[]);demoApp.filter('paging',function(){ //paging filter return function(lists,start){ //Two parameters lists are the raw data of your ng-repeat in html:// start, that is, the parameters passed after paging, that is, currentPage*listsPerPagereturn lists.slice(start); //Segment the original data according to start};});demoApp.controller('demoCtrl',['$scope',function($scope){ //Page controller $scope.demoLists = [ //Simulate data {name:['hello world','hello world again','why i say hello wrong','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/); //Show data per page to get the total number of pages $scope.pageNum = []; //Generate the page number and ng-repeat in html for(var i=;i<$scope.pages;i++){$scope.pageNum.push(i);}$scope.currentPage = ; //Set the current page is $scope.listsPerPage = ; //Set $scope.setPage = function(num){ // The function $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 executed on the next page if ($scope.currentPage < $scope.pages-){$scope.currentPage++;}}}]);I want to say that the pageNum you generate starts from 0, but the real page numbers start 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 the Wulin.com website!