AngularJS1.5に再挑戦 その16 Pagination
概要
AngularJS1.5に再挑戦 その16 Pagination
参考動画・参考サイト
AngularJS — Superheroic JavaScript MVW Framework
Pagination
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
リポジトリ内の、
dirPagination.js
をダウンロードする。(RAW->別名で保存)js/external/dirPagination.js
という階層で、保存する。index.htmlに、
<script src='/js/external/dirPagination.js'></script>
を追記する。app/app.module.jsに、dirPagination.jsのモジュールを追記する。
'use strict'; angular.module('try', [ // external 'angularUtils.directives.dirPagination', 'ngResource', 'ngRoute', // internal 'blogDetail', 'blogList', 'confirmClick' ]);
- blog-list.htmlの、ng-rpeatの部分を、dir-pagination に変更する。
<div class="row" dir-paginate='item in colItems | itemsPerPage: 4'>
<dir-pagination-controls></dir-pagination-controls>
を挿入する。全体としては以下のような形で作成する。
... <span ng-if='items.length == 0'>Posts coming soon</span> <div class="row" dir-paginate='item in colItems | itemsPerPage: 4'> <div class="{{ cssClass }}" ng-repeat='post in items | filter: query'> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>{{ post.title }}</h3> <p>{{ post.text }} {{ post.publishDate }}</p> <p><a ng-href='/blog/{{ post.id }}' class='btn btn-primary' confirm-click='Are you ready?' confirmed-click='goToItem(post)' />View</a></p> </div> </div> </div> </div> <dir-pagination-controls></dir-pagination-controls>
さらに、検索queryが表示される場合は、paginationを無効にしたいので、
<dir-pagination-controls ng-hide='query.length > 0'></dir-pagination-controls>
を挿入する。pagination-idを指定することにより、main-contentと、sub-contentなどpaginationをcontentごとに分けることができる。
<li dir-paginate='item in items | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content"> {{ item.title }} </li> <span ng-if='postItems.length == 0'>No items</span> <dir-pagination-controls ng-hide='query.length > 0' pagination-id="sub-content"></dir-pagination-controls> <span ng-if='items.length == 0'>Posts coming soon</span> <div class="row" dir-paginate='item in colItems | itemsPerPage: 4 | filter:query' pagination-id="main-content"> <div class="{{ cssClass }}" ng-repeat='post in items'> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>{{ post.title }}</h3> <p>{{ post.text }} {{ post.publishDate }}</p> <p><a ng-href='/blog/{{ post.id }}' class='btn btn-primary' confirm-click='Are you ready?' confirmed-click='goToItem(post)' />View</a></p> </div> </div> </div> </div> <dir-pagination-controls ng-hide='query.length > 0' pagination-id="main-content"></dir-pagination-controls>
- 検索結果が0だった場合に、No itemsという表示をする。
<li dir-paginate='item in items | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content"> {{ item.title }} </li> <span ng-if='postItems.length == 0'>No items</span>
- 同様にmain-contentの方でも設定できる。
<div class="row" dir-paginate='item in colItems | filter:query | itemsPerPage: 4 as mainItems' pagination-id="main-content"> ... <span ng-if='mainItems.length == 0'>No items</span>
- 他の人のコードをそのまま拝借できると楽だな。