AngularJSのビルトインのフィルターの使い方をまとめました。
デモとコードサンプルはこちら。
AngularJSにはビルトインで容易されているフィルターと自分でフィルターする内容を定義するカスタムフィルターの機能があります。
ビルトインフィルターでも自分で定義した関数と組み合わせてカスタマイズする事が出来ますが、ここではビルトインフィルターの基本的な使用方法をまとめました。
（１）ビルトインフィルターの種類
number
orderBy
filter
limitTo
date
json
currency
lowercase
uppercase
（２）サンプルコードを使ってビルトインフィルターの使用方法を確認
比較的よく使用すると思われるnumber、orderBy、filter、limitToについて確認します。
１）ng-repeatと組み合わせて配列データを降順に並べ替え
orderByで並べ替えのキーとする属性名を指定します。降順にする場合は、”-“を指定します。
<tr ng-repeat=”myScore in myScores | orderBy: ‘-day’>
$scope.myScores = [
{ day: “2014/01/08”, jpn: 74 ,math: 52, sci: 68 },
{ day: “2014/03/08”, jpn: 54 ,math: 63, sci: 38 },
{ day: “2014/04/08”, jpn: 36 ,math: 91, sci: 78 },
{ day: “2014/02/08”, jpn: 74 ,math: 52, sci: 48 },
{ day: “2014/11/08”, jpn: 48 ,math: 57, sci: 28 },
{ day: “2014/06/08”, jpn: 94 ,math: 52, sci: 78 }
];
２）ng-repeatと組み合わせて表示する配列データの個数を指定
<tr ng-repeat=”myScore in myScores | limitTo:3″>
３）小数点の桁数を指定
計算した平均値を小数点１桁で表示します。
{{(myScore.jpn + myScore.math + myScore.sci)/3 | number:1}}
４）複数の項目を使って並び替え
grp属性を使ってグループ単位に並べ替え、グループ内で安い順に表示しています。
<tr ng-repeat=”item in products | orderBy:[‘grp’,’price’]”>
$scope.products = [
{name: “デジタルカメラA”,grp:”カメラ”,price: 8500,chk:true},
{name: “デジタルカメラD”,grp:”カメラ”,price: 3500,chk:false},
{name: “パソコンB”,grp:”パソコン”,price: 15900,chk:true},
{name: “デジタルカメラB”,grp:”カメラ”,price: 9800,chk:true},
{name: “パソコンD”,grp:”パソコン”,price: 5900,chk:false},
{name: “パソコンC”,grp:”パソコン”,price: 25900,chk:true},
{name: “パソコンA”,grp:”パソコン”,price: 14900,chk:true}
];
５）属性の値を使ってフィルタリング
filterは、配列データに対して使用し、配列データ内の引数で指定した値とマッチする配列要素のみリターンして、フィルタリングします。
下記サンプルでは、”chk”属性の値がtrueで、”name”属性の値がテキストボックスに入力された値の商品をフィルタリングして表示しています。
フィルター：<input ng-model=”query” type=”text” placeholder=”商品名で検索” autofocus>
<tr ng-repeat=”item in products |filter:{chk: ‘true’,name: query}”>
６）価格などを３桁区切りで表示
number:0を指定すると3桁区切りで数値を表示出来ます。
<td>{{item.price | number:0}}円</td>