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

AngularJS TIPS

配列の内容をフィルターするには?(filter)

2015年8月24日

任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。

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

 filterは、任意の条件で配列を絞り込むためのフィルターです。このfilterは、AngularJS標準フィルターの中でも複雑なフィルターで、引数の組み合わせによって、さまざまな検索条件を設定できます。いくつかのサンプルと共に、挙動を確認してみましょう。

filterフィルターの基本

 まずは、指定のキーワードで記事情報を検索する、最も基本的な例です。

HTML
<!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 : '入門'">
    <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.articles = [
      {
        url: 'https://www.buildinsider.net/web/jqueryref',
        title: 'jQuery逆引きリファレンス',
        released: new Date(2015, 8, 1),
        pageview: 5013
      },
      ……中略……
    ];
  }]);
</script>
</body>
</html>
特定のキーワードでオブジェクト配列を検索するコード(filter.html)

コードが長くなるため、一部を省略しています。中略の部分は、こちらを参照してください。

「入門」という文字列を含んだ記事情報だけをリスト表示

 filterフィルターの基本的な構文は、以下の通りです。

[構文]filterフィルター

{{array | filter :exp [:compare]}}
  • array: 対象の配列
  • exp: 検索条件
  • compare: 比較方法

 引数expに文字列を指定した場合、filterフィルターはオブジェクトに含まれる全てのプロパティを検索し、いずれかの値に部分一致するものがあれば、これを取り出します(ここではtitleプロパティの値が部分一致していますが、他のプロパティでも部分一致するものがあれば取り出すということです)。

filterフィルターのさまざまな比較

 その他にも、filterフィルターでは引数expcompareの値を変更することで、さまざまな検索条件を表現できます。

(1)否定の検索条件を表す

 !入門のように、検索文字列の先頭に!を付与することで、否定を表します。例えば以下は「入門」という文字列を含まない記事情報を取り出します。

HTML
<li ng-repeat="article in articles | filter : '!入門'">
否定の条件式を利用したコード(filter.html)
「入門」という文字列を含まない記事情報を取得
(2)完全一致条件で検索する

 引数comparetrue(デフォルトはfalse)に指定した場合、完全一致検索となります。例えば、以下のようなコードでは結果は空となります。

HTML
<li ng-repeat="article in articles | filter : '入門' : true">
完全一致検索を利用したコード(filter.html)
「入門」に完全一致する記事情報はない

 完全一致検索した結果を確認するならば、(例えば)引数expを「AngularJS TIPS」のようにしてください。

(3)検索するプロパティを特定する

 デフォルトで、filterフィルターはオブジェクトの全てのプロパティを対象に検索を実行します。よって、冒頭の例であれば、もしもtitleプロパティ以外に「入門」を含んでいるものがあれば(この例では考えにくいですが)、これも拾い出してしまいます。そこで検索先のプロパティを特定したいならば、「プロパティ名, 検索値」のハッシュ形式で、引数expを指定します。

例えば、以下であれば、titleに「リファレンス」が、urlに「buildinsider」が含まれる記事情報を取得します。

HTML
<li ng-repeat="article in articles | filter : { title: 'jQuery', url: 'buildinsider' }">
プロパティを特定して検索するためのコード(filter.html)
title/urlプロパティをキーに検索した結果

 ちなみに、特殊なプロパティ名として全てのプロパティを表す$も利用できます。これ単体で利用することはあまりありませんが(それならば、単なる文字列で指定すればよいからです)、「ある検索値は特定のプロパティについて、別の検索値は全てのプロパティについて検索したい」という場合などに利用します。

処理対象:フィルタリング カテゴリ:基本
処理対象:フィルターコンポーネント カテゴリ:基本
API:filter カテゴリ:ng(コアモジュール) > filter components(フィルターコンポーネント)

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

AngularJS TIPS
20. 配列をソートするには?(orderBy)

配列の内容を、指定されたキーで並べ替える方法を解説。逆順や、複数のキーを指定してソートする方法も紹介する。

AngularJS TIPS
21. 独自の規則で配列をソートするには?(orderBy)

独自の並べ替え規則を使って、配列の内容の並べ替える方法を解説。逆順や、複数キーの指定に独自のソートルールを使う方法も紹介する。

AngularJS TIPS
22. 【現在、表示中】≫ 配列の内容をフィルターするには?(filter)

任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。

AngularJS TIPS
23. 自作の検索条件/比較ルールで配列を検索するには?(filter)

任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説する。

AngularJS TIPS
24. JavaScriptオブジェクトをJSON形式に変換するには?(json)

jsonフィルターを使って、JavaScriptオブジェクトをJSON形式に変換する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!