Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

AngularJS1.x その0015 angularUtilsのpaginationを使ってみる

制作 angularjs

参考にさせて頂いたページ

公式のgithubのページです。

angularUtils/src/directives/pagination at master · michaelbromley/angularUtils · GitHub

bowerかnpmでダウンロードして、プロジェクトに配置する

npmでダウンロードした内の以下のファイルを任意のディレクトリに配置します。

  • dirPagination.js

ng-app.jsの作成とその記述内容

例として以下の通り。
モジュールを作成して、コントローラーを登録しています。
参考ページでは$scope.itemsを想定しているようですが、$scope.articlesにしてみました。

// myAppモジュールを作成して、依存モジュールを読み込み
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);

// myAppモジュールにSubmitCtrlコントローラーを登録
// Articletagsのリスト表示とページネーター用のコントローラー
app.controller('ArticlesCtrl', ['$scope', function($scope) {
  //例えばこんな感じで配列を用意する
  $scope.articles = [
    'article1',
    'article2',
    'article3',
    'article4',
    'article5',
    'article6',
  ];
}]);

sample.htmlの作成とその記述内容

まず以下の3ファイルを読み込みます。

  • angular.min.js
  • 上記で作成したng-app.js
  • ダウンロードしたdirPagination.js

myAppモジュールを作成しているので以下の通り。

<html ng-app="myApp">

次に、登録したコントローラーを以下のような感じでhtmlに適用します。

<div ng-controller="ArticlesCtrl">
  <ul>
    <li dir-paginate="article in articles | itemsPerPage: 2">{{ article }}</li>
  </ul>
  <dir-pagination-controls></dir-pagination-controls>
</div>

$scope.articlesをコントローラー内で宣言したので、dir-paginate属性は、参考ページと少し変えてdir-paginate="article in articles | itemsPerPage: 2"となります。
ページネーターのリンクは、<dir-pagination-controls></dir-pagination-controls>とすることでデフォルトで用意されたページネーターが出力されます。

ここまでで、もう動作しました。

ここから先はカスタマイズに関する事も書いていきたいと思います。

ページネーターのボタン周りをカスタマイズする

npmでダウンロードしたファイルの中に、dirPagination.tpl.htmlがあります。

これを任意のディレクトリに配置して、ng-app.jsに以下のように書くと、dirPagination.tpl.htmlが読み込まれます。
パスは相対パスやルートパスなどで、ご自身の環境に合わせて変更してください。

app.config(function(paginationTemplateProvider) {
  paginationTemplateProvider.setPath('/assets/js/ng/dirPagination.tpl.html');
});

上記のような書き方の他に、以下のようにhtmlに記述する方法もあります。
どちらかを選択すると良いと思います。

<dir-pagination-controls template-url="/assets/js/ng/dirPagination.tpl.html"></dir-pagination-controls>

dirPagination.tpl.htmlをそのまま読み込むだけだと、デフォルトのページネーターと同じデザインなので、dirPagination.tpl.htmlを編集します。
このテンプレートの中では以下のような記述で、値が出力できるようです。

  • {{ pagination.current }}
  • {{ pagination.last }}
  • {{ range.lower }}
  • {{ range.upper }}
  • {{ range.total }}

ページネーターを出力するための<dir-pagination-controls></dir-pagination-controls>のタグには以下の属性が付けられるようです。

  • max-size=""
  • direction-links=""
  • boundary-links=""
  • on-page-change=""
  • pagination-id=""
  • template-url=""
  • auto-hide=""

おわりに

公式のREADMEを読みながら、自分の使いたい機能の部分だけ書いてみました。

他にも機能がありますし、付けられる属性などの詳細は公式ページをご確認ください。