AngularJSのフィルターは、HTML内だけではなく、スクリプト内のコントローラ、サービス、ディレクティブ、カスタムフィルター内でも使用する事が出来ます。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
スクリプト内でフィルターを使用する方法
１）方法１
$filter(フィルター名)の書式を使ってスクリプト内で利用する事が出来ます。
この場合、下記のように依存性指定の引数に$filterを指定する必要があります。
下記例では、ビルトインの”filter”フィルターを使用し、入力のproducts配列に対し、name属性に”パソコン”が含まれるデータを抽出してリターンしています。
$filter(フィルター名)の書式を使ってスクリプト内で利用する事が出来ます。
この場合、下記のように依存性指定の引数に$filterを指定する必要があります。
下記例では、ビルトインの”filter”フィルターを使用し、入力のproducts配列に対し、name属性に”パソコン”が含まれるデータを抽出してリターンしています。
demoApp.controller("filterCtrl", function($scope,$filter) {
$scope.products = [
{no: 1,name: "デジタルカメラA",price: 8500,chk:true},
{no: 2,name: "デジタルカメラD",price: 3500,chk:false},
{no: 3,name: "パソコンB",price: 15900,chk:true},
{no: 4,name: "デジタルカメラB",price: 9800,chk:true},
{no: 5,name: "パソコンD",price: 5900,chk:false},
{no: 6,name: "パソコンC",price: 25900,chk:true},
{no: 7,name: "パソコンA",price: 14900,chk:true}
];
$scope.pcProducts = $filter("filter")($scope.products, {name: 'パソコン'});
})
２）方法２
フィルター名Filterという書式を使って利用する事も出来ます。ビルトインのnumberやcurrencyフィルターを使う場合は、numberFilter、currencyFilterになります。
方法１と同様に依存性指定の引数に指定する必要があります。
下記例では、ビルトインの”filter”フィルターを使用し、入力のproducts配列に対し、chk属性がtrueのデータを抽出してリターンしています。
demoApp.controller("filterCtrl", function($scope,filterFilter) {
$scope.products = [
{no: 1,name: "デジタルカメラA",price: 8500,chk:true},
{no: 2,name: "デジタルカメラD",price: 3500,chk:false},
{no: 3,name: "パソコンB",price: 15900,chk:true},
{no: 4,name: "デジタルカメラB",price: 9800,chk:true},
{no: 5,name: "パソコンD",price: 5900,chk:false},
{no: 6,name: "パソコンC",price: 25900,chk:true},
{no: 7,name: "パソコンA",price: 14900,chk:true}
];
$scope.trueProducts = filterFilter($scope.products, {chk: 'true'});
})
既存のフィルターを拡張する例
カスタムフィルター内で既存のフィルターを使用し、拡張する事が出来ます。
下記例では、ビルトインの”limitTo”フィルターと定義済みのカスタムフィルター”offset”を使って、”range”というカスタムフィルターを定義しています。
入力配列データからオフセットと個数を指定して、指定した範囲のデータを抽出しています。
下記例では、ビルトインの”limitTo”フィルターと定義済みのカスタムフィルター”offset”を使って、”range”というカスタムフィルターを定義しています。
入力配列データからオフセットと個数を指定して、指定した範囲のデータを抽出しています。
（スクリプト）
demoApp.filter('range', function($filter) {
return function (input, offset, count) {
var offsetInput = $filter("offset")(input, offset);
return $filter("limitTo")(offsetInput, count);
}
})
（HTML）
<tr ng-repeat="item in products | range:i_offset:i_size">