Angular+angular-ui implementation Paging (code simpler, easier to understand OH)

In front of a page, but personally think can only play, the actual business code is too complicated (I want to go code, performance simplification of the road "do not know which day to become a master ~ yy a little harmless "), logically a bit confusing. So today we take a look at another example of the only implementation of paging no query (to be paged after the query, please look at I I wrote in front of the page article, combined with this article, I believe you will soon be able to fix!) ）。 OK, first look at the effect:

Using the paging component in Angular-ui, please click here for Angular-ui how to use https://angular-ui.github.io/bootstrap/ In the bootstrap chapter (where Ui-router etc I also suggest you look more)

Attention must be in accordance with the official website to introduce the corresponding JS and CSS to take effect, don't forget.

The HTML code is as follows:

<div class= "" > <table class= "table" > <thead class= "hed" > <tr> &LT;TH&G t; provinces 1</th> <th> provinces 2</th> <th> provinces 3</th> <th> Provinces 4&LT;/TH&G        T            </tr> </thead> <tbody> <tr ng-repeat= "A in allitem[currentpage-1]" > &LT;TD ng-bind= "A.N" ></td> <td ng-bind= "A.S" ></td> <td ng-bind= "A.N" &GT;&L t;/td> <td ng-bind= "A.S" ></td> </tr> </tbody> </table></di V><div class= "" > <pagination boundary-links= "true" total-items= "TotalItems" ng-model= "Curren                Tpage "class=" Pagination-sm embed-responsive-item "previous-text=" prev "next-text=" Next " first-text= "Home" last-text= "last" max-size= "MaxSize" rotate= "false" Nu M-pages= "NumpaGes "> </pagination></div> 

The JS code is as follows:

$scope. CurrentPage =1;//Initial current page        $scope. maxSize = 3;//up to 3 pages other uses ... Instead of        $scope. allitem=[];//Store all pages        $http. Get ('./js/test '). Success (            function (data) {                $scope. addr= DATA.L;                var num= $scope. addr.length;                $scope. TotalItems =num;//Total number of data for                (Var i=0;i<num;i+=10) {                    $scope. Allitem.push ($scope. Addr.slice (i,i+ )                }//This method can divide an array into multiple arrays and put them in a large array, pressing each array 10 data "because the component defaults to 10 data page", if 41 data we will be divided into 5 pages                           }        );

　　

The author JS folder under the Test.json store is the Chinese address JSON data source, used for testing.

Angular+angular-ui implementation Paging (code simpler, easier to understand OH)