【Angularjs】filterに自作検索条件を使う

filterに自作検索条件を使う方法です。

構文

{{<data> | filter : <mySearch>}}

<data>:検索対象のデータ群
<mySearch>:自作検索条件

例1

価格を持った製品のリストから、価格が100円以上のものをng-repeatでテーブル形式で表示する。

sample.html

<tr ng-repeat ="product in products | filter : mySearch">

sample.js

---

$scope.mySearch = function(value, index){
  return value.price >= 100;
};

---

mySearchメソッドが検索条件を表しています。
検索条件を自作するには、value(現在の要素)と、index(現在のインデックス)を引数とするメソッドを自作する必要があります。
そして、結果に反映したいものはtrueを返すようにします。

例2

価格を持った製品のリストから、価格が100円以上のものの件数を表示する。

sample.html

<p>{{(products | filter : mySearch ).length}}</p>

sample.js(例1と同じ)

---

$scope.mySearch = function(value, index){
  return value.price >= 100;
};

---

上記のようにすると、データ群の中で検索条件に合致する件数を表示することができます。