Example of front-end paging Control Implemented by angularjs: angularjs Paging

Example of front-end paging Control Implemented by angularjs: angularjs Paging

I wrote a jQuery paging display plug-in, which has many bugs. Now, due to business needs, I learned a little about AngularJS and implemented this paging plug-in with angularjs again.

Implementation:

(The css file with bootstrap added)

Usage:

Angular-pagination.js code:

/*** Angularjs paging control * Created by CHEN on 2016/11/1. */angular. module ('mymodule', []). directive ('mypagination', function () {return {restrict: 'ea ', replace: true, scope: {option:' = pageOption '}, template: '<ul class = "pagination">' + '<li ng-click = "pageClick (p)" ng-repeat = "p in page" class = "{option. curr = p? \ 'Active \ ': \'} "> '+' <a href =" javascript :; "rel =" external nofollow ">{{ p }}</a> '+' </li> '+' </ul> ', link: function ($ scope) {// fault tolerance Processing if (! $ Scope. option. curr | isNaN ($ scope. option. curr) | $ scope. option. curr <1) $ scope. option. curr = 1; if (! $ Scope. option. all | isNaN ($ scope. option. all) | $ scope. option. all <1) $ scope. option. all = 1; if ($ scope. option. curr> $ scope. option. all) $ scope. option. curr = $ scope. option. all; if (! $ Scope. option. count | isNaN ($ scope. option. count) | $ scope. option. count <1) $ scope. option. count = 10; // get the array of displayed pages $ scope. page = getRange ($ scope. option. curr, $ scope. option. all, $ scope. option. count); // bind the Click Event $ scope. pageClick = function (page) {if (page = '« ') {page = parseInt ($ scope. option. curr)-1;} else if (page = '»') {page = parseInt ($ scope. option. curr) + 1;} if (page <1) page = 1; else if (page> $ scope. option. all) page = $ scope. option. all; // if (page = $ scope. option. curr) return; if ($ scope. option. click & typeof $ scope. option. click = 'function') {$ scope. option. click (page); $ scope. option. curr = page; $ scope. page = getRange ($ scope. option. curr, $ scope. option. all, $ scope. option. count) ;}}; // return page number range (used to traverse) function getRange (curr, all, count) {// calculate the displayed page number curr = parseInt (curr ); all = parseInt (all); count = parseInt (count); var from = curr-parseInt (count/2); var to = curr + parseInt (count/2) + (count % 2)-1; // handle the displayed page size if (from <= 0) {from = 1; to = from + count-1; if (to> all) {to = all ;}if (to> all) {to = all; from = to-count + 1; if (from <= 0) {from = 1 ;}} var range = []; for (var I = from; I <= to; I ++) {range. push (I);} range. push ('»'); range. unshift ('«'); return range ;}}}});

Index.html code:

<! Doctype html> 
App. js code:
// Introduce the 'mymodele' module var app = angular. module ('app', ['mymodule']); app. contriller ('myctrl ', function ($ scope) {// sets the paging parameter $ scope. option = {curr: 1, // current page number all: 20, // total page number count: 10, // maximum displayed page number, the default value is 10 // The number of clicks. The parameter page is the number of clicks. click: function (page) {console. log (page); // here you can jump to a page and so on ...}}});
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.