あらかじめ、YEOMAN（generator-angular-fullstack）でui.bootstrapを使う設定をしておきます。
「generator-angular-fullstack」は、MEANフルスタック・テンプレートジェネレーターです。
「YEOMAN」は、「Yo＋Grunt+Bower」を合わせたスカフォールド（対話式）開発ワークフローです。
Yo
プロジェクトのひな型生成ツールです。様々な言語に合わせたテンプレートを作成してくれます。
Bower
node.jsの「npm」のフロントエンド版パッケージマネージャーといったところでしょうか。
Grunt
ビルドツールです。SCSSなどのメタ言語のコンパイル、画像・CSS・JSの圧縮、サーバーの起動などのタスクをあらかじめ設定すると、順次実行してくれます。
（「generator-angular-fullstack」を使えば、自動的にそのタスクを作ってくれます。かなり便利）
YEOMANは、上記の３つの要素から成り立っています。
前置きはここまでとして、以下、スクリプトです。
|
1 2 3 4 5 6 7 8 9 |
$scope.currentPage = 1; $scope.viewby = 5; $scope.itemsPerPage = $scope.viewby; $scope.maxSize = 5; $http.get('/api/items').then(function(response) { $scope.items = response.data; $scope.totalItems = $scope.items.length; }); |
コレクションを読み込んだ後に、アイテムの総数をセットしてください。
この手順を守らないと、データがいつまでたってもバインドされませんｗ
以下、HTMLです。
|
1 2 3 4 5 |
<pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages" items-per-page="itemsPerPage"></pagination> <div ng-repeat="item in items.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage))"> /* 省略 */ </div> |
これだけで動きます。
対象を指定していないのにちゃんと動くのは、bootstrapのjsがうまいことやってくれてるんだと思います。
慣れたら、１コレクションにつき５分位で作業終わります。
さらに「ng-repeat」内で、対象のドキュメント内にある配列を「ng-repeat」でバインドした時も、その配列に対してページネーションを設定すれば動いちゃいます。
こんなケースの時です。
|
1 2 3 4 5 6 |
<div ng-repeat="item in items"> /* 省略 */ <div ng-repeat="content in item.contents"> /* 省略 */ </div> </div> |
このケースの時、私は「main.controller.js」のページネーション用変数を配列にして、親「item」の「$index」と紐付けました。（もっとうまいやり方あるんでしょうね）
これだけでページネーションを設定できちゃうの、ほんとすごい。