AngularJSのスクリプト内でフィルターを使用、既存のフィルターを拡張

AngularJSのフィルターは、HTML内だけではなく、スクリプト内のコントローラ、サービス、ディレクティブ、カスタムフィルター内でも使用する事が出来ます。

デモとコードサンプルはこちら
 
※目次をクリックすると目次の下部にコンテンツが表示されます。

スクリプト内でフィルターを使用する方法
1)方法1
 
$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: 'パソコン'});
})

 
2)方法2
 
フィルター名Filterという書式を使って利用する事も出来ます。ビルトインのnumberやcurrencyフィルターを使う場合は、numberFilter、currencyFilterになります。
 
方法1と同様に依存性指定の引数に指定する必要があります。
 
下記例では、ビルトインの”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”というカスタムフィルターを定義しています。
 
入力配列データからオフセットと個数を指定して、指定した範囲のデータを抽出しています。
 

(スクリプト)
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">

関連記事の目次

コメントを残す

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