Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1.5に再挑戦 その16 Pagination

概要

AngularJS1.5に再挑戦 その16 Pagination

参考動画・参考サイト

Coding for Entrepreneurs

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>
  • 他の人のコードをそのまま拝借できると楽だな。