今天我們來看看一種只實現分頁沒有查詢的例子吧，先看效果：
采用了Angular-UI中的分頁組件，關于Angular-UI如何使用請移步這里https://angular-ui.github.io/bootstrap/中的bootstrap章節（其中ui-router等我也建議你多看看）
注意：必須按照官網上引入相應的js和css才能生效，千萬不要忘記了。
HTML代碼如下：
<div class=""> <table class="table"> <thead class="hed"> <tr> <th>省份1</th> <th>省份2</th> <th>省份3</th> <th>省份4</th> </tr> </thead> <tbody> <tr ng-repeat="a in allitem[currentPage-1]"> <td ng-bind="a.n"></td> <td ng-bind="a.s"></td> <td ng-bind="a.n"></td> <td ng-bind="a.s"></td> </tr> </tbody> </table> </div><div class=""> <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm embed-responsive-item" previous-text="上一頁" next-text="下一頁" first-text="首頁" last-text="尾頁" max-size="maxSize" rotate="false" num-pages="numPages"> </pagination></div>
JS代碼如下：
$scope.currentPage =1;//初始當前頁 $scope.maxSize = 3;//最多顯示3頁其他的用???代替 $scope.allitem=[];//存放所有頁 $http.get('./js/test').success( function (data) { $scope.addr=data.l; var num= $scope.addr.length; $scope.totalItems =num;//共有多少條數據 for(var i=0;i<num;i+=10){ $scope.allitem.push($scope.addr.slice(i,i+10)) }//此方法可以將一個數組分成多個數組并且放在了一個大數組里面，按每個數組10條數據【因為組件默認為10條數據一頁】存放，假如41條數據的話我們將分成5頁 } );筆者Js文件夾下的test.json存放的是中國地址JSon數據源，用于測試。
================================================================================
PS:上述版本是15年的了；現在上傳下最新版本的 樣例吧；其實就是官網上的例子，鑒于某些寶寶不會FQ看，就拿下來了；
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對武林網的支持。
新聞熱點
疑難解答
