Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

配列からm~n件目の要素を取り出すには?(limitTo)

2015年10月13日

limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。

  • このエントリーをはてなブックマークに追加

 配列からm~n件目の要素を取り出すには、limitToフィルターを利用します。

[構文]limitToフィルター

{{ array | limitTo :len [:start]}}

  • array: 対象の配列
  • len: 取り出す件数
  • start: 取得開始位置(AngularJS 1.4以降)

 まずは、具体的な例を見てみましょう。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<div>{{[1, 2, 3, 4, 5] | limitTo: 2}}</div>
  <!--1[1,2]-->
<div>{{[1, 2, 3, 4, 5] | limitTo: -2}}</div>
  <!--2[4,5]-->
<div>{{[1, 2, 3, 4, 5] | limitTo: 2 : 1}}</div>
  <!--3[2,3]-->
<div>{{'あいうえお' | limitTo: 2}}</div>
  <!--4あい-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .controller('MyController', ['$scope', function($scope) {
  }]);
</script>
</body>
</html>
limitToフィルターで配列から要素を取り出すコード(limit.html)

 1limitToフィルターの最も基本的な例です。配列の先頭から指定された件数だけ要素を取り出します。2のように、引数lenに負数を与えることで、末尾から要素を取り出すこともできます。

 3は引数startlenを指定した例です。start + 1start + len件目の要素を取得します。引数startは、AngularJS 1.4以降で利用できます。ページングなどの例にも利用できますので、あとで具体的なコードとともに解説します。

 そして、4は文字列に対してlimitToフィルターを適用した例です。この場合、start + 1start + len文字目を取り出すために利用できます。

例:ページング処理を実装する

 limitToフィルターを利用することで、ページング処理も簡単に実装できます。例えば以下は記事情報を、3件ごとにページングで区切る例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body ng-controller="MyController">
<table class="table">
  <tr>
    <th>タイトル</th><th>著者</th><th>公開日</th>
  </tr>
  <!--1指定範囲の記事情報を列挙-->
  <tr ng-repeat="article in articles | orderBy: 'released' | limitTo: num:
begin">
    <td><a ng-href="{{article.url}}">{{article.title}}</a></td>
    <td>{{article.author}}</td>
    <td>{{article.released | date: 'yyyy年MM月dd日'}}</td>
  </tr>
</table>
<div>
  [<a href="#" ng-click="onpaging(0)">1</a></li>
  [<a href="#" ng-click="onpaging(1)">2</a></li>
  [<a href="#" ng-click="onpaging(2)">3</a></li>
  [<a href="#" ng-click="onpaging(3)">4</a></li>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="i18n/angular-locale_ja-jp.js"></script>
<script>
angular.module('myApp', [])
  .controller('MyController', ['$scope', function($scope) {
    // 2ページあたりの表示件数/表示開始位置(初期値)
    $scope.num = 3;
    $scope.begin = 0;

    $scope.articles = [
      {
        url: 'https://www.buildinsider.net/web/jqueryref',
        title: 'jQuery逆引きリファレンス',
        author: 'WINGSプロジェクト',
        released: new Date(2015, 8, 1)
      },
      ……中略……
    ];

    // 3ページャークリック時に表示開始位置を再設定
    $scope.onpaging = function(page){ 
      $scope.begin = $scope.num * page;
    };
  }]);
</script>
</body>
</html>
記事情報を3件ごとにページング表示するコード(limit_pager.html)

省略している部分も含めたサンプル全体は、こちらからダウンロードできる。

[2]をクリック"

[2]をクリック

3件ごとにページング

 ページング機能を実装するには、まず、配列からbegin件目からnum件だけ抜き出すためのlimitToフィルターを準備します(1)。変数beginnumの初期値は、それぞれ03で(2)、最初は0件目(先頭)から3件だけ取り出します。

 フィルターに先立って、orderByフィルターを介している点にも注目です。オブジェクト配列が何らかの意図した順序で並んでいなければ、m~n件目を抜き出すという行為も意味がないからです。orderBylimitToフィルターは、一般的にセットで(=組み合わせて)利用します。

 フィルター式が準備できたら、あとはページャー(=ページングのためのリンク)をクリックしたタイミングで、変数beginの値を変更するだけです(3)。取得開始位置(begin)は「ページあたりの件数(num)×ページ数(page)」で算出できます*1

  • *1 本稿では、簡単化のために固定的なリンクとしてページャーを実装していますが、UI BootstrapのPaginationディレクティブなどを利用することで、データ件数に応じて動的にページャーを生成することもできます。
処理対象:フィルタリング カテゴリ:基本
処理対象:フィルターコンポーネント カテゴリ:基本
API:limitTo カテゴリ:ng(コアモジュール) > filter components(フィルターコンポーネント)

※以下では、本稿の前後を合わせて5回分(第26回~第30回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
26. 数値(単数/複数)によって表示を切り替えるには?(ng-plurlize)

ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明する。

AngularJS TIPS
27. 日付/時刻データを整形するには?(date)

dateフィルターを使って、日付/時刻データを任意の書式に変換する方法を説明する。ロケールの指定方法についても解説。

AngularJS TIPS
28. 【現在、表示中】≫ 配列からm~n件目の要素を取り出すには?(limitTo)

limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。

AngularJS TIPS
29. 要素のスタイルプロパティを操作するには?(ng-style)

ng-styleディレクティブを使って、要素のスタイル(style属性)を設定・変更する方法を説明する。

AngularJS TIPS
30. 要素のスタイルクラスを操作するには?(ng-class)

スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!