快捷導(dǎo)航

利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)（代碼加簡(jiǎn)單）

更新時(shí)間：2017年03月10日 11:47:15 作者：薄禍

這篇文章主要介紹了利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)，利用Angular+Angular-Ui實(shí)現(xiàn)的分頁(yè)分頁(yè)代碼更加簡(jiǎn)單，更加容易懂哦，相信本文的內(nèi)容對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。

今天我們來(lái)看看一種只實(shí)現(xiàn)分頁(yè)沒(méi)有查詢的例子吧，先看效果：

采用了Angular-UI中的分頁(yè)組件，關(guān)于Angular-UI如何使用請(qǐng)移步這里https://angular-ui.github.io/bootstrap/中的bootstrap章節(jié)（其中ui-router等我也建議你多看看）

注意：必須按照官網(wǎng)上引入相應(yīng)的js和css才能生效，千萬(wàn)不要忘記了。

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="上一頁(yè)"
    next-text="下一頁(yè)"
    first-text="首頁(yè)"
    last-text="尾頁(yè)"
    max-size="maxSize"
    rotate="false" num-pages="numPages">
 
 
 </pagination>
</div>

JS代碼如下：

$scope.currentPage =1;//初始當(dāng)前頁(yè)
  $scope.maxSize = 3;//最多顯示3頁(yè)其他的用···代替
  $scope.allitem=[];//存放所有頁(yè)
  $http.get('./js/test').success(
   function (data) {
    $scope.addr=data.l;
    var num= $scope.addr.length;
 
    $scope.totalItems =num;//共有多少條數(shù)據(jù)
 
    for(var i=0;i<num;i+=10){
     $scope.allitem.push($scope.addr.slice(i,i+10))
    }//此方法可以將一個(gè)數(shù)組分成多個(gè)數(shù)組并且放在了一個(gè)大數(shù)組里面，按每個(gè)數(shù)組10條數(shù)據(jù)【因?yàn)榻M件默認(rèn)為10條數(shù)據(jù)一頁(yè)】存放，假如41條數(shù)據(jù)的話我們將分成5頁(yè)
 
    
   }
  );

筆者Js文件夾下的test.json存放的是中國(guó)地址JSon數(shù)據(jù)源，用于測(cè)試。

================================================================================

PS:上述版本是15年的了；現(xiàn)在上傳下最新版本的樣例吧；其實(shí)就是官網(wǎng)上的例子，鑒于某些寶寶不會(huì)FQ看，就拿下來(lái)了；

點(diǎn)擊這里進(jìn)行下載

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

AngularJS頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決
這篇文章主要介紹了AngularJS框架使用中出現(xiàn)頁(yè)面閃爍問(wèn)題的解決方法,閃爍問(wèn)題一般是初始化未加載完畢造成的,需要的朋友可以參考下
2016-03-03
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識(shí),這里整理了一下相關(guān)資料，及示例代碼，幫助大家學(xué)習(xí)和理解，有興趣的小伙伴可以參考下
2016-09-09
AngularJS使用angular-formly進(jìn)行表單驗(yàn)證
這篇文章主要介紹了AngularJS使用angular-formly進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下
2015-12-12
angular實(shí)現(xiàn)spa單頁(yè)面應(yīng)用實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)spa單頁(yè)面應(yīng)用實(shí)例，小本篇文章是對(duì)單頁(yè)面的一個(gè)簡(jiǎn)單的基本邏輯操作，這個(gè)方法可以搭建基本的單頁(yè)面的邏輯結(jié)構(gòu)。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
cnpm加速Angular項(xiàng)目創(chuàng)建的方法
這篇文章主要介紹了cnpm加速Angular項(xiàng)目創(chuàng)建的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
詳解Angular之路由基礎(chǔ)
單頁(yè)應(yīng)用中，組件時(shí)構(gòu)建應(yīng)用的基礎(chǔ)元素，頁(yè)面展示什么內(nèi)容均是靠頁(yè)面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫(xiě)法。
2021-05-05
使用Angular CDK實(shí)現(xiàn)一個(gè)Service彈出Toast組件功能
本文主要寫(xiě)用cdk實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Toast組件，使用的是cdk中的overlay模塊，需要手動(dòng)安裝環(huán)境，具體安裝方法及相關(guān)實(shí)現(xiàn)代碼跟隨小編一起看看吧
2021-07-07
詳解Angular6.0使用路由步驟(共7步)
這篇文章主要介紹了詳解Angular6.0使用路由步驟(共7步)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
給angular加上動(dòng)畫(huà)效遇到的問(wèn)題總結(jié)
本文給大家總結(jié)了一下在angular中給ng-repeat列表加上動(dòng)畫(huà)效果時(shí)所遇到的問(wèn)題及解決方法，推薦給大家，希望大家能夠喜歡。
2016-02-02
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來(lái)管理狀態(tài)的方法,文中通過(guò)示例代碼介紹的很詳細(xì)，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以一起來(lái)學(xué)習(xí)學(xué)習(xí)。
2016-12-12