1、angular-pagination
是基於angular 編寫的可復用分頁指令
安裝
克隆項目到本地:
git clone https://github.com/febobo/angular-pagination.git
要跑demo環境要求:
node , bower , npm , gulp
安裝: npm install && bower install
運行: gulp serve
demo用法
html
1 <body ng-app="demo" ng-controller="demoCtro" class="row text-center"> 2 <div ui-pagination conf="conf"></div> 3 </body>
JS
1 var app = angular.module('demo' , ['pagination']); 2 3 app.controller('demoCtro' , function($scope){ 4 5 $scope.title = 'pagination-directive'; 6 7 $scope.conf = { 8 9 // 總條數 10 total : 1190, 11 12 // 當前頁 13 currentPage : 1, 14 15 // 一頁展示多少條 16 itemPageLimit : 1, 17 18 // 是否顯示一頁選擇多少條 19 isSelectPage : false, 20 21 // 是否顯示快速跳轉 22 isLinkPage : false 23 } 24 25 // 監控你的頁碼 , 發生改變既請求 26 $scope.$watch('conf.currentPage + conf.itemPageLimit' , function(news){ 27 // 把你的http請求放到這里 28 console.log($scope.conf.currentPage , $scope.conf.itemPageLimit) 29 }) 30 })