AngularJS TIPS
自作の検索条件／比較ルールで配列を検索するには？（filter）
任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説する。
別稿「TIPS：配列の内容をフィルターするには？」では、filterフィルターを使って配列を検索する、基本的な方法を解説しました。本稿では引き続き、その引数exp／expressionにコールバック関数を指定することで、より複雑な検索ルールを表現する方法について解説します。
［構文］filterフィルター
- array： 対象の配列
- exp： 検索条件
- compare： 比較方法
検索条件をカスタマイズする
検索条件をカスタマイズするには、引数expにコールバック関数を渡します。例えば以下は、pageview（ページビュー）が1000未満の記事だけを取り出す例です。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<ul>
<li ng-repeat="article in articles | filter : pvLow">
<a ng-href="{{article.url}}">
{{article.title}}
（{{article.released | date}}｜{{article.pageview}}）</a>
</li>
</ul>
<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) {
$scope.pvLow = function(value, index) {
return value.pageview < 1000;
};
$scope.articles = [
{
url: 'https://www.buildinsider.net/web/jqueryref',
title: 'jQuery逆引きリファレンス',
released: new Date(2015, 8, 1),
pageview: 5013
},
……中略……
];
}]);
</script>
</body>
</html>
|
※コードが長くなるため、一部を省略しています。中略の部分は、こちらを参照してください。
ここでのコールバック関数（検索関数）はpvLowです。検索関数は、引数としてvalue（現在の要素値）、index（インデックス番号）を受け取り、戻り値としてtrue／falseを返さなければなりません。戻り値がtrueで、その要素を結果配列に残します。
pvLow関数であれば、value.pageviewで記事のページビューを参照できますので、これを比較した結果をそのまま関数の戻り値として返しています。
比較ルールをカスタマイズする
引数compareにコールバック関数を指定することで、要素値（個々のプロパティ値）と検索値（引数expの値）とをどのように比較するかをカスタマイズできます。例えば以下は、大文字・小文字を区別しない完全一致検索を実行する例です*1。
- *1 引数
compareをtrueにした場合、大文字・小文字を区別した完全一致となります。
|
<ul>
<li ng-repeat="article in articles | filter : { title: 'AngularJS Tips' } : icExactMatch">
</ul>
……中略……
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.icExactMatch = function(expected, actual) {
return angular.equals(expected.toLowerCase(), actual.toLowerCase());
};
……中略……
</script>
|
ここでのコールバック関数（比較関数）はicExactMatchです。比較関数は、引数としてexpected（実際のプロパティ値*1）とactual（検索値）とを受け取り、戻り値としてtrue／falseを返さなければなりません。戻り値がtrueで、その要素を結果配列に残します。
icExactMatch関数の例であれば、いったん引数expected／actualの双方をtoLowerCaseメソッドで小文字にそろえることで、大文字・小文字の区別を付けない検索を実施します。angular.equalsメソッドは、AngularJSが提供するメソッドの1つで、引数の値同士が等しいかどうかを判定します。
- *1 引数
exp（検索式）が文字列の場合は、オブジェクトのプロパティ値（ここではurl ～pageviewの値）が順に渡されます。
処理対象：フィルターコンポーネント カテゴリ：基本
API：filter カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
API：angular.equals カテゴリ：ng（コアモジュール） > function components（関数コンポーネント）
※以下では、本稿の前後を合わせて5回分（第21回～第25回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
22. 配列の内容をフィルターするには？（filter）
任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。
23. 【現在、表示中】≫ 自作の検索条件／比較ルールで配列を検索するには？（filter）
任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説する。
