AngularJS TIPS
配列からm～n件目の要素を取り出すには？（limitTo）
limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。
配列からm～n件目の要素を取り出すには、limitToフィルターを利用します。
［構文］limitToフィルター
{{ array | limitTo :len [:start]}}
- array： 対象の配列
- len： 取り出す件数
- start： 取得開始位置（AngularJS 1.4以降）
まずは、具体的な例を見てみましょう。
|
<!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>
|
1はlimitToフィルターの最も基本的な例です。配列の先頭から指定された件数だけ要素を取り出します。2のように、引数lenに負数を与えることで、末尾から要素を取り出すこともできます。
3は引数start／lenを指定した例です。start + 1～start + len件目の要素を取得します。引数startは、AngularJS 1.4以降で利用できます。ページングなどの例にも利用できますので、あとで具体的なコードとともに解説します。
そして、4は文字列に対してlimitToフィルターを適用した例です。この場合、start + 1～start + len文字目を取り出すために利用できます。
例：ページング処理を実装する
limitToフィルターを利用することで、ページング処理も簡単に実装できます。例えば以下は記事情報を、3件ごとにページングで区切る例です。
|
<!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>
|
※省略している部分も含めたサンプル全体は、こちらからダウンロードできる。
［2］をクリック
ページング機能を実装するには、まず、配列からbegin件目からnum件だけ抜き出すためのlimitToフィルターを準備します（1）。変数begin、numの初期値は、それぞれ0、3で（2）、最初は0件目（先頭）から3件だけ取り出します。
フィルターに先立って、orderByフィルターを介している点にも注目です。オブジェクト配列が何らかの意図した順序で並んでいなければ、m～n件目を抜き出すという行為も意味がないからです。orderBy／limitToフィルターは、一般的にセットで（＝組み合わせて）利用します。
フィルター式が準備できたら、あとはページャー（＝ページングのためのリンク）をクリックしたタイミングで、変数beginの値を変更するだけです（3）。取得開始位置（begin）は「ページあたりの件数（num）×ページ数（page）」で算出できます*1。
- *1 本稿では、簡単化のために固定的なリンクとしてページャーを実装していますが、UI Bootstrapの
Paginationディレクティブなどを利用することで、データ件数に応じて動的にページャーを生成することもできます。
処理対象：フィルターコンポーネント カテゴリ：基本
API：limitTo カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
※以下では、本稿の前後を合わせて5回分（第26回～第30回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
26. 数値（単数／複数）によって表示を切り替えるには？（ng-plurlize）
ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明する。
28. 【現在、表示中】≫ 配列からm～n件目の要素を取り出すには？（limitTo）
limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。
30. 要素のスタイルクラスを操作するには？（ng-class）
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。
