除了前面所述的無限滾動介面模式，在這裡要分享傳統的分頁模式，雖然infinite scrolling能夠滿足大部分使用情境，但有些網站是不需要那麼即時性的，而且在搜尋時，使用者雖然可以透過輸入關鍵字來查詢，但有些使用者仍希望有索引的方式來查找資訊，試想，當我們在使用google search時，假設在第二頁找到符合需求的資料而下次需要這筆資料時，我們通常已經記憶住它在哪一頁了，而若是分頁設計模式則能完全滿足我們的需求。
一、首先一樣設計分頁清單這個控件所要做的一些動作，如初始化、點選不同頁時pageChanged等，而這裡搭配bootstrap ui可參考：http://angular-ui.github.io/bootstrap/，的Pagination，而這裡也設計了自訂的filter來實作limitTo的功能，只是與原本不同在於自訂的sliceData這個filter可以指定起始與結束的範圍，這樣一來就能順利搭配分頁的機制來顯示區段資料。
(function(){
angular.module('paginationModule',['ui.bootstrap'])
.filter('sliceData',function(){
return function(input,start,end){
return input.slice(start,end)
}
})
.directive('listPagination',function(){
return{
restrict: 'E',
scope:{
listTitle: '@',
datasource: '=',
numPerPage: '@'
},
transclude: 'true',
templateUrl: 'listview.html',
link: function(scope,elem,attrs){
scope.divWidth = document.getElementById('myDiv').offsetWidth -60
scope.numOfTotalItems = scope.datasource.length
scope.initPerPage = 5
scope.itemStart = 0
scope.itemEnd = scope.numPerPage
scope.$watch('numPerPage',function(newVal){
if (newVal) {
scope.itemEnd = newVal
}
})
scope.pageChanged = function(){
scope.itemStart = (scope.currentPage - 1)*scope.numPerPage
scope.itemEnd = scope.currentPage * scope.numPerPage
}
scope.getNumPerPage = function(){
if (!scope.numPerPage) scope.numPerPage = scope.initPerPage
return scope.numPerPage
}
}
}
})
.directive('inject',function(){
return{
restrict: 'A',
link: function (scope, element, attrs, ctrl, transcludeFn) {
if (!transcludeFn) return;
transcludeFn(scope, function (clone) {
element.empty();
element.append(clone);
});
}
}
})
})()
二、設計listview樣板，重點在於這個標籤，是由bootstrap ui所設計的分頁控件，原理一樣，開放出一些設定參數如total-items代表我們總共有多少項目，items-per-page每一頁顯示幾筆，ng-model來binding目前所選的頁數，ng-change可綁定當換頁時的事件，另外尚有一些未使用的參數也可參考官方API: http://angular-ui.github.io/bootstrap/來搭配使用。
<div class="panel panel-info">
<div class="panel-heading"><h3>{{listTitle}}</h3>
<div class="list-group-item" align="center" ><span
class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading...
</div>
</div>
<div id="myDiv">
<li class="list-group-item" ng-repeat="item in datasource|sliceData:itemStart:itemEnd">
<div ng-transclude inject></div>
</li>
</div>
<div class="panel-heading" align="center">
<pagination total-items="numOfTotalItems" items-per-page="getNumPerPage()" ng-model="currentPage"
ng-change="pageChanged()"></pagination>
</div>
</div>
三、接下來就是使用該控件的一些初始化資訊，並準備傳入控件內app.js。
(function(){
angular.module('appModule',['paginationModule'])
.controller('appController',function($scope){
$scope.maxItemsLength = 430
$scope.numPerPage = 10
$scope.datasource = []
$scope.init = function(){
for (var i = 0;i < $scope.maxItemsLength;i++){
$scope.datasource.push({
name: 'a',
id: i
})
}
}
$scope.init()
})
})()
四、回到index.html，其中使用了該控件，並傳入我們的datasource、title、num-per-page來做設定，並顯示出我們要的內容。
<html ng-app="appModule">
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="app.js"></script>
<script src="pagination.js"></script>
</head>
<body ng-controller="appController">
<div style="margin: auto;width: 50%">
<list-pagination datasource="datasource"
num-per-page="{{numPerPage}}"
list-title="{{'Pagination Demo'}}">
<img ng-src="http://placehold.it/{{divWidth}}x50&text={{item.name + item.id}}">
</list-pagination>
</div>
</body>
</html>
留言
張貼留言