AngularJSの ng-repeat からフィルタをかけて絞り込みする方法

AngularJSで要素を繰り返ししたいとき、便利なのが ng-repeat  という構文

この ng-repeat  では、フィルタfilter )を上手く使うことで絞り込みができます。

絞り込みに使うことができる方法は次の2つ

  • inputとかの入力値で絞り込み
  • 関数とかを使って絞り込み

やり方自体もそんなに難しくもありません。

ここでは 上2つの方法で、 ng-repeat にフィルタをかける方法 をまとめました。

1.inputとかの入力値で絞り込みするやり方

まず1つめの方法は input  とかの入力欄の値で絞り込みするやり方

コチラの方法だと、全てビュー内で完結できるからスマートに書けます

その具体的なやり方は次の通りです。

 

まず例として、次みたいなビュー(HTML)を作成

ハイライトした8行目に注目

まず ng-model="searchText"  を持つ入力欄を作成、
そして ng-repeat  の中で適当な要素を作成して、ビュー表示してます。

重要なのが  filter:searchText  というところ

ここで ng-repeat  の繰り返し中に、 searchText  の入力値でフィルタしてあげてます。

 

ちなみに フィルタ( filter ) の構文を一般化すると、次みたいな感じ

まず filter_expression  にフィルタ対象の配列とかを指定、
そのあと filter:  に続けて絞り込み条件を渡すだけ

参考URL : http://js.studio-kingdom.com/angularjs/ng_filter/filter

条件には入力値だけでなく、関数とかオブジェクトも渡せます。

2.関数を使って ng-repeat をフィルタするやり方

では次に 関数を使って絞り込みするやり方 について

こっちは入力値を直接渡すのに比べて、より柔軟に絞り込みできます。

その具体的なやり方は次の取り

 

まず例として、次みたいなビュー(HTML)を定義

ハイライトした filter:filterByCodeName  という部分に注目

こういう風に関数名を直接渡してやればOK 

引数とかを渡す必要は特にありません。

 

そうしたら、この関数をコントローラ側で定義すればいいだけです。

例えば次コードみたいな感じで

上のコードだと item  っていう引数を取ってる点に要注意

これは ng-repeat  で現在参照されてる値を表してます。

あとはこの値をビューとして表示するか、それを真偽値( true  / false  )で返せばいいだけ

上の例だと正規表現を使って絞り込みしてるのが分かりますか?

関数を渡すと、こういう風に柔軟な絞り込みができるのが利点ですね。

ここまでのまとめ

ということで簡単に今までのまとめ

  • 絞り込みには filter を使う
    基本構文は filter_expression | filter:expression  みたいな形。対象となる配列を渡し、 filter: の後に入力値とかの絞り込みしたい値を渡すだけ
  • 関数による絞り込みも可
    そして filter には値だけでなく、関数なども指定可能。もし関数で絞り込みする場合、条件式から true  / false  を返せば表示するかの絞り込みができる

簡単な絞り込み機能だけだったら フィルタ( filter ) だけで簡単に実装できそうです。

以上、AngularJSの ng-repeat でフィルタをかける方法でした。ではでは

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください