2015年3月11日 星期三

AngularJS 分享 - Pagnation Directive (分頁)

前陣子無聊就來練習一下 AngularJS 的 Directive (現在我還是覺得 AngularJS 的 Directive 和它的測試是真的有那麼一點複雜...)

之後稍微搞懂 Directive 之後就馬上順手寫了一個 AngularJS 的分頁元件

這個分頁 Directive 的樣式是基於 Bootstrap 3 的，程式內容不會介紹太多，純粹分享原始程式


<html ng-app="demoApp">
<head>
<title>A pagnation demo</title>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="./js/app.js"></script>
<script src="./js/directive.js"></script>
</head>
<body>
<h1>A pagnation directive implementation</h1>
<div ng-controller="ProductController" class="col-md-offset-4 col-md-4">
<ul>
<li ng-repeat="p in filteredProducts">{{p}}</li>
</ul>
<!--
item-size 表示所有資料的筆數
num-per-page 設定一頁顯示幾筆資料
page-size 下方顯示分頁的數量
ng-model 目前頁數
ng-change 當換頁時的 callback function
-->
<pagination item-size="{{products.length}}"
num-per-page="{{numPerPage}}"
page-size="5"
ng-model="currPage"
ng-change="changeProduct()"></pagination>
</div>
</body>
</html>
view raw demo.html hosted with ❤ by GitHub


angular.module("demoApp", [])
.controller("ProductController", function($scope){
$scope.currPage = 3;
$scope.numPerPage = 5;
$scope.products = [];
for(var i=0;i<50;i++){
$scope.products[i] = "Product " + i;
}
$scope.changeProduct = function(){
console.log($scope.currPage);
var begin = (($scope.currPage - 1) * $scope.numPerPage),
end = begin + $scope.numPerPage;
$scope.filteredProducts = $scope.products.slice(begin, end);
};
$scope.changeProduct();
})
view raw app.js hosted with ❤ by GitHub

angular.module("demoApp", [])
.controller("PaginationController", function($scope, $element, $attrs){
var self = this,
ngModelCtrl;
this.init = function(ngModelCtrl_){
ngModelCtrl = ngModelCtrl_;
ngModelCtrl.$render = function(){
self._changePagationState();
self.render();
}
$scope.totalPages = Math.ceil(
$scope.itemSize/parseInt($attrs.numPerPage));
};
this._changePagationState = function(){
$scope.page = parseInt(ngModelCtrl.$viewValue) || 1;
$scope.showFirst = $scope.page == 1?false:true;
$scope.showLast = $scope.page == $scope.totalPages?false:true;
}
$scope.selectPage = function(page){
ngModelCtrl.$setViewValue(page);
ngModelCtrl.$render();
};
})
.directive("pagination", function(){
return{
scope:{
itemSize: "@"
},
restrict: "E",
require: ['pagination', '?ngModel'],
controller: "PaginationController",
templateUrl: "paginationTemplate.html",
link: function(scope, el, attr, ctrls){
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
var pageSize = parseInt(attr.pageSize);
paginationCtrl.init(ngModelCtrl);
paginationCtrl.render = function(){
scope.pages = getPageList();
};
function getPageList(){
var half = Math.floor(pageSize/2),
isAlign = pageSize%2==1,
pages = [createPage(scope.page, true)],
flag = scope.page,
windows = half,
stopPoint;
while(flag-1 > 0 && windows > 0){
pages.push(createPage(--flag, false));
windows--;
}
stopPoint = flag;
flag = scope.page;
windows += isAlign?half:half-1;
while(flag+1 <= scope.totalPages && windows > 0){
pages.push(createPage(++flag, false));
windows--;
}
while(windows > 0){
pages.push(createPage(--stopPoint, false));
windows--;
}
return pages.sort(function(a, b){
return a.text-b.text
});
}
function createPage(page, active){
return{
text: page,
active:active
};
}
}
};
});
view raw directive.js hosted with ❤ by GitHub

<div>
<ul class="pagination">
<li ng-class="{disabled: !showFirst}">
<a href="#" ng-click="selectPage(1)">First</a>
</li>
<li ng-repeat="page in pages" ng-class="{active: page.active}">
<a href="#" ng-click="selectPage(page.text)">{{page.text}}</a>
</li>
<li ng-class="{disabled: !showLast}">
<a href="#" ng-click="selectPage(totalPages)">Last</a>
</li>
</ul>
</div>
view raw paginationTemplate.html hosted with ❤ by GitHub
最後附上demo 連結 點我
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)