angular.js Example of page code

Displaying a list of items is a common task for most web apps. In general, our data will be much more difficult to display in a single page. In this case, we need to display the data as a page, with the ability to go to the previous page and the next page. Now in the learning angular, using ANGULARJS paging, based on directive implementation, the style uses the bootstrap, directly in the HTML code to add the tag can be called.

Look first.

Instance Code

1App.directive (' Pagepagination ',function(){2   return {3Restrict: ' E ',4Template: ' <div class= ' Pagination-box "><ul class=" pagination "><li ng-class=" Page.style "ng-repeat=" Page in PageList "><a href=" {{page.link}} ">{{Page.name}}</a></li></ul><ul class=" Pagination "ng-if=" pagelist[0] "><li class=" page-count disabled "><span> Total <b>{{pagerecord}}< /b> Records/Total <b>{{pagecount}}</b> page </span></li></ul></div> ',5Replace:true,6 scope: {7"PageId": "=",8"Pagerecord": "=",9"PageSize": "=",Ten"Pageurltemplate": "=" One     }, AController: [' $scope ',function($scope) { -          -$scope. GetLink =function(pageId) { the         return$scope. Pageurltemplate.replace ("{page}", pageId); -       }; -    -$scope. getpagelist =function(){ +         varpage = []; -         varFirstPage = parseint (($scope. pageId-1)/$scope. _pagesize) * $scope. _pagesize + 1; + Page.push ({ AName: ' Home ', atStyle: $scope. pageId = = 1? "Disabled": "", -Link: $scope. GetLink (1) -         }); - Page.push ({ -Name: ' prev ', -Style: $scope. pageId = = 1? "Disabled": "", inLink: $scope. GetLink (1) -         }); to          for(varPageId = FirstPage; PageId < FirstPage + 10; PageId + +){ +           if(pageId >= 1 && pageId <=$scope. PageCount) { - Page.push ({ the Name:pageid, * Link: $scope. GetLink (pageId), $Style:pageid = = $scope. PageId? "Active": ""Panax Notoginseng             }); -           } the         } + Page.push ({ AName: ' Next page ', theStyle: $scope. pageId = = $scope. PageCount? "Disabled": "", + Link: $scope. GetLink ($scope. PageCount) -         }); $ Page.push ({ $Name: ' Last ', -Style: $scope. pageId = = $scope. PageCount? "Disabled": "", - Link: $scope. GetLink ($scope. PageCount) the         }); -         returnpage;Wuyi       }; the    -$scope. Pageinit =function(){ Wu         if(! $scope. pageId | |!$scope. Pagerecord) { -SetTimeout (function(){ About$scope. $apply (function(){ $ $scope. Pageinit (); -             }); -}, 10); -}Else{ A           if( !!$scope. PageSize) { +$scope. _pagesize =parseint ($scope. pageSize); the}Else{ -$scope. _pagesize = 10; $           } the$scope. pageId =parseint ($scope. pageId); the$scope. PageCount = parseint (($scope. pageRecord-1)/$scope. _pagesize) + 1; the           if($scope. pageId < 1 ){ the$scope. pageId = 1; -}Else if($scope. pageId >$scope. PageCount) { in$scope. pageId =$scope. PageCount; the           } the$scope. pageload =true; About$scope. pagelist =$scope. Getpagelist (); the         } the       }; the          +$scope. pageload =false; - $scope. Pageinit (); the     }]Bayi   } the});

Calling code:

1 <page-pagination2   page-id= "PageId"3   page-record= " RecordCount "4   page-url-template=" Urltemplate ">5 </page-pagination>

The above is the Angular.js page code of the entire content, I hope that everyone's learning has helped.

An instance of the Angular.js page code