Paging functionality based on ANGULARJS

<span id="Label3"></p><p><p>Look at the pagination first</p></p><p><p></p></p><p><p>is based on Bootstrap's basic paging effect, styles can be first viewed Boostrap document Familiarity.</p></p><p><p>In angularjs, like this common component (and should) be written to public directive, the following can be implemented in the Project.</p></p><p><p>①. Common Components Pagedirective.js</p></p><pre class="brush:javascript;gutter:true;">Define ([' angular '], function (angular) {//dependent Angu larjs, Requirejs is used here, no user changes var directives = Angular.module ("app.directive", [])//default ng-app= ' app '; Directives.directive (' pagination ', function () {return {restrict: ' E ', scope:{num Pages: ' = ', currentpage: ' = ', pagecalback: ' = ', onselectpage: ' & '} , template:[' <ul class= ' pagination ' > ', ' <li class= ' first ' Ng-class = "{disabled:noprevious ()}" > ", ' <a ng-click=" selectfirst () "> Home </a>", ' </li> ', ' <li class= ' prev ' ng-class= ' {disabled:noprevious ()} ' > ', ' <a ng-click= ' selectprevious () > Prev </a> ', ' </li> ', ' <l I ng-style= "prestyle" > ", ' <a>...</a> ', ' </li> ', ' <li ng-rep eat= "page in pages" ng-class= "{active:isactive (page)}" > ", ' <a ng-click=" selectpage (page) ' >{{page}}</a> ', ' </li> ', ' <li ng-style= ' Nexstyle ' > ', ' <a>...</a> ', ' </li> ', ' <li class = "next" ng-class= "{disabled:nonext ()}" > ", ' <a ng-click=" selectnext () "> next </a> ', ' </li> ', ' <li class= ' last ' ng-class= ' {disabled:nonext ()} ' > ', ' <a ng-click= ' selectlast () > Last </a> ', ' </li> ', ' </u l> ',].join ('), replace:true, link:function (scope) {scope.prestyle= (dis) Play: "none"}; scope.nexstyle= {display: "none"}; Scope. $watch (' numpages ', function (value) {if (value >) {scope.nexstyle = {d Isplay: "block"}; Value = 10; } else {scope.nexstyle = {display: "none"}; } scope.pages = []; for (var i = 1; i <= value; i++) {scope.pages.push (i); } }); scope.isactive = function (page) {return scope.currentpage = = = page; }; scope.noprevious = function () {return scope.currentpage = = = 1; }; Scope.nonext = function () {return scope.currentpage = = = scope.numpages; } scope.selectpage = function (page) {if (!scope.isactive (page)) { Determines the logic of the page display based on the current page count If (page >) {scope.prestyle = {display: "block"}; } else {scope.prestyle = {display: "none"}; }//console.log ("scope.numpages:---" + scope.numpages); Console.log ("page:---" + page); If ((scope.numpages-page) > 5) {scope.nexstyle = {display: "block"}; } else {scope.nexstyle = {display: "none"}; If (page <= && scope.numpages >) {scope.nexstyle = {display: "block"}; }} if (page > Ten) {sc Ope.pages = []; If ((scope.numpages-page) > 5) {for (var i = (page-5); i < (page + 5); I++) { Scope.pages.push (i); }} else {for (var i = (scope.numpages-10); I <= scope.numpag es; I++) {scope.pages.push (i); }}}} Else {scope.pages = []; for (var i = 1; i <= (>= scope.numpages?scope.numpages:10); i++) {scope.p Ages.push (i); }} scope.currentpage = page; Scope.onselectpage ({page:page}); } }; Scope.selectfirst = function () {if (!scope.noprevious ()) {scope.selectpage (1); } }; scope.selectprevious = function () {if (!scope.noprEvious ()) {scope.selectpage (scope.currentpage-1); } }; Scope.selectnext = function () {if (!scope.nonext ()) {scope.selectpage (scope.cur Rentpage + 1); }} scope.selectlast = function () {if (!scope.nonext ()) { Scope.selectpage (scope.numpages); } }; Scope.onselectpage = function (opts) {var page = opts.page; Scope.pagecalback (page); }}}) return Directives;})</pre><p><p>Take a look at how to use</p></p><p><p>In the controller</p></p><p><p>　　</p></p><pre class="brush:javascript;gutter:true;">Define ([' angular ', ' app '],function () {app.controller (' name ', [' $scope '],function () {$scope. searchclick = 0; List (1); $scope. pagecallback = function (page) {list (page); }; Function List (page) {if ($scope. Searchclick = = 0) {$http. post ('/server-side address/' + page ', {' par Amsstr ': "}). Success (function (result) {if (result && result). Code = =) {$scope. repayments = result.pagelist; $scope. page.totalpage = result.totalpage; $scope. page.currentpage = result.currentpage; Console.log (' Get page data totalpage ' +result.totalpage); Console.log (' Get page data currentpage ' +result.currentpage); } }); } else {$http. post ('/server-sideaddress/' + page, {' paramsstr ': json.stringify ($scope. params)}). success (function (result) { If (result && result.code = =) {$scope. repayments = result.page List; $scope. page.totalpage = result.totalpage; $scope. page.currentpage = result.currentpage; Console.log (' Send page data totalpage ' +result.totalpage); Console.log (' Send page data currentpage ' +result.currentpage); }}). error (function (err) {console.log (err); });　　 } }　　　　　　})})</pre><p><p>A little bit messy, explained, encapsulates a list method, the list method is based on the Client's data to display the page and jump page, to see what we get to the data format:</p></p><p><p>　　</p></p><p><p></p></p><p><p>perfect, focus on the data at the beginning of a few pages, this is the page display and jump core, indicating the background in the maintenance logic.</p></p><p><p>If the user is looking for data, the entire data sheet is deconstructed together, remember to set $scope.searchclick = 1, and then still list (1); he'll Go. Post method</p></p><p><p>Look at how HTML is Written.</p></p><p><p>　　</p></p><p><p>　　</p></p><p><p>　　</p></p><p><p>Paging functionality based on ANGULARJS</p></p></span>