Yeoman + AngularJS + Bootstrap で比較的お手軽にページネーションを実装してみるメモ

(angular1.2.0, generator-angular0.6.0-rc.1, twitter bootstrap 3.0)

angular-SimplePagination を利用してお手軽にページネーションしてみる

https://github.com/svileng/angular-SimplePagination

プロジェクト作成

$ mkdir simple_pagination_sample
$ yo angular

仮表示用のデータなど作成

app/scripts/controllers/main.js

'use strict';

angular.module('simplePaginationSampleApp')
  .controller('MainCtrl', function ($scope, Pagination) {
    $scope.books = [];
    for (var i = 1; i < 50; i++) {
      $scope.books.push({name: 'NAME' + i, comment: 'COMMENT' + i});
    }
  });

app/vies/main.html

<div class="main">
    <h1>Books</h1>
  <table class="table table-hover">
    <tbody>
      <tr ng-repeat="book in books">
        <td class="active" width="30%">{{ book.name }}</td>
        <td>{{ book.comment }}</td>
      </tr>
    </tbody>
  </table>
</div>

ページネーション

factory 生成

$ yo angular:factory simplePagination
	app/scripts/services/simplePagination.js
	test/spec/services/simplePagination.js

app/scripts/services/simplePagination.js

下記に差し替える

[https://github.com/svileng/angular-SimplePagination/blob/master/simplePagination.js

もしくは下記でうまくいくかも（試してない）

$ wget --no-check-certificate https://raw.github.com/svileng/angular-SimplePagination/master/simplePagination.js app/scripts/services/simplePagination.js

app/scripts/app.js

   'ngCookies',
   'ngResource',
   'ngSanitize',
-  'ngRoute'
+  'ngRoute',
+  'SimplePagination'

app/scripts/controllers/main.js

angular.module('simplePaginationSampleApp')
-  .controller('MainCtrl', function ($scope) {
+  .controller('MainCtrl', function ($scope, Pagination) {
     $scope.books = [];
     for (var i = 1; i < 50; i++) {
       $scope.books.push({name: 'NAME' + i, comment: 'COMMENT' + i});
     }
+
+    $scope.pagination = Pagination.getNew(5);
+    $scope.pagination.numPages = Math.ceil(
+      $scope.books.length / $scope.pagination.perPage
+    );
   });

app/views/main.html

     <h1>Books</h1>
     <table class="table table-hover">
     <tbody>
-      <tr ng-repeat="book in books">
+      <tr ng-repeat="book in books | startFrom: pagination.page * pagination.perPage | limitTo: pagination.perPage">
         <td class="active" width="30%">{{ book.name }}</td>
         <td>{{ book.comment }}</td>
       </tr>
     </tbody>
   </table>
 </div>
+
+<ul class="pagination">
+    <li ng-click="pagination.prevPage()" ng-class="{disabled: pagination.page <= 0}"><a href="">Prev</a></li>
+    <li ng-repeat="num in [] | range: pagination.numPages" ng-class="{active: pagination.page == num}">
+        <a href="" ng-click="pagination.toPageId(num)">{{num + 1}}</a>
+    </li>
+    <li ng-click="pagination.nextPage()" ng-class="{disabled: pagination.page >= pagination.numPages - 1}"><a href="">Next</a></li>
+</ul>