用AngularJS創建分頁(轉自前端亂燉）
在編寫普通網頁或者web應用時，一個最普遍的需求就是創建分頁。分頁這個詞乍一聽上去可能有些陌生，但是你肯定每天都在用，它就是你在瀏覽新聞時最下邊顯示你已經看到第幾頁，同時跳轉到具體某一頁，首頁或者末頁的那個東西。這個當然不是什麼很難的需求，實現它的方式多種多樣，從前端到後端都可以有具體的實現方法。藉助AngularJS，你可以使用幾個簡單的指令和過濾器（filter）來實現它。
我們下面先來看代碼，然後再來講述其中的一些關鍵點：
<div ng-controller="PaginationCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | offset: currentPage*itemsPerPage | limitTo: itemsPerPage"> <td>`item`.`id`</td>
<td>`item`.`name`</td>
<td>`item`.`description`</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">
<div class="pagination">
<ul>
<li ng-class="prevPageDisabled()"><a href ng-click="prevPage()"> Prev</a>
</li>
<li ng-repeat="n in range()"ng-class="{active: n == currentPage}" ng-click="setPage(n)">
<a href="#">{{n+1}}</a>
</li>
<li ng-class="nextPageDisabled()"><a href ng-click="nextPage()">Next </a>
</li>
</ul>
</div>
</td>
</tfoot>
</table>
</div>上面的代碼很好理解，我們看到我們首先使用ng-controller聲明瞭一個控制器PaginationCtrl，然後在其中還是用了ng-class，ng-click指令，ng-click指令很好理解，綁定了它的DOM元素一旦被點擊就會執行scope中的一串代碼，一般來說是執行一個函數。而ng-class則會實時更新綁定了它的DOM元素的類。還有一點需要注意的是我們再次使用了一個叫做offset的過濾器，它的作用是截取需要顯示的條目，它帶有一個參數，我們將在後面具體看到它的實現方式。
app.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});如果你不太記得AngularJS中的過濾器怎麼寫，我們現在就來簡單的複習一下。AngularJS的過濾器需要返回一個函數，這個函數接收至少一個參數，它的第一個參數是需要過濾的值本身，如果是單個變量，那就是單個變量。如果是在ng-repeat指令中，它指的是整個數組，而不是數組的每一項。在這裏，我們的offset是放在ng-repeat中使用的，因此它需要處理的input是整個數組。
下面我們需要定義一個控制器PaginationCtrl來管理實際的$scope.items數組，同時處理啓用/禁用分頁按鈕的邏輯，代碼如下：
app.controller("PaginationCtrl", function($scope) {
$scope.itemsPerPage = 5;
$scope.currentPage = 0;
$scope.items = [];
for (var i=0; i<50; i++) {
$scope.items.push({id: i, name: "name "+ i, description: "description " + i });
}
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function() {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function() {
return Math.ceil($scope.items.length/$scope.itemsPerPage)-1;
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function() {
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
}到目前爲止，使用AngularJS創建一個分頁的代碼已經完成了。總結一下，其實分頁的思想很簡單，首先我們的items是完全載入頁面的，其次，我們使用了一個過濾器來將items數組從當前需要顯示的第一個項目截斷到最後，同時使用AngularJS內建的過濾器limitTo來限制顯示的條目。另外，我們在這裏還是用了ng-class指令，來啓用/禁用第一頁和最後一頁的按鈕。