AngularJSでカスタムフィルターを作成する方法は?

以下のリストに示すように、ng-repeatディレクティブでフィルターを使用したことがありますか?

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

もしそうなら、AngularJSアプリケーションでフィルターを使用しています。AngularJS は、検索などの多くの組み込みディレクティブを提供します。必要に応じて、AngularJS ではカスタム フィルターを作成することもできますが、これについてはこの投稿で説明します。

AngularJS は、カスタム フィルターを作成するための簡単な API を提供します。コントローラーを作成するために app.controller() を使用し、モジュールを作成するために app.module() を使用していることを覚えています。まったく同じ方法で、AngularJS は AngularJS でカスタム フィルターを作成するための angular.filter API を提供しました。

カスタムフィルターは、次の構文を使用して作成できます。

カスタムフィルターを作成するには、次の手順を実行する必要があります。

• カスタムフィルター名と関数を入力パラメーターとして app.filter() に渡すことで、app.filter を使用してフィルターを作成します。
• App.filter() will return a function
• 返される関数は、さまざまなオプションの入力パラメータを取ることができます
• 返される関数にはカスタムフィルターコードがあり、出力が返されます。

非常に単純なカスタムフィルターの作成から始めましょう。このカスタムフィルターを文字列に適用すると、各文字が大文字で文字列が返されます。

MyApp.filter('toUpperCase', function () {
    return function (input)
    {
        var output = "";       
        output = input.toUpperCase();
        return output;
    }
})

以下のリストに示すように、ビューで toUpperCase カスタム フィルターを使用できます。

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toUpperCase}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

カスタムフィルターの名前では大文字と小文字が区別されることに注意してください。上記で作成したビューは、次のリストに示すように、コントローラからデータを読み取っています。

MyApp.controller("ProductController", function ($scope) {
    $scope.products = [
		{ 'name': 'pen', 'price': '200' },

		{ 'name': 'pencil', 'price': '400' },

		{ 'name': 'book', 'price': '2400' },

		{ 'name': 'ball', 'price': '400' },

		{ 'name': 'eraser', 'price': '1200' },
    ];
})

次に、次の図に示すように、ビューで大文字と小文字でレンダリングされた製品名を取得します。

MyApp.filter('toPositionUpperCase', function () {
 
    return function (input,position)
    {
        var output = [];       
        var capLetter = input.charAt(position).toUpperCase();
        for (var i = 0; i < input.length; i++) {
 
            if (i == position) {
                output.push(capLetter);
            } else {
                output.push(input[i]);
            }
 
        }
        output = output.join('');
        return output;
    }
})

以下のリストに示すように、ビューでtoPositionUpperCaseカスタムフィルターを使用できます。お気づきのように、コロンを使用して入力パラメーターをカスタムフィルターに渡しています。

<div ng-controller="ProductController">
    <table class="table">              
        <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toPositionUpperCase:1}}</td>
            <td>{{a.price}}</td>
        </tr>
    </table>
</div>

次の図に示すように、ビューで大文字の 2 文字目でレンダリングされた製品名を取得します。

この記事を締めくくる前に、アイテムのコレクションに適用されるカスタムフィルターを作成しましょう。製品のリストから、特定の価格を超えるすべての製品をフィルタリングしたいとします。このカスタムフィルターは、以下のリストに示すように記述できます。

MyApp.filter('priceGreaterThan', function () {
 
    return function (input, price) {
        var output = [];
        if (isNaN(price)) {
 
            output = input;
        }
        else {
            angular.forEach(input, function (item) {
 
                if (item.price > price) {
                    output.push(item)
                }
            });
        }
        return output;
    }
})

以下のリストに示すように、ビューでカスタムフィルターを使用できます。入力タイプのテキストボックスから価格パラメータを渡しています。

<h1>With Custom Filter</h1>
       
<div ng-controller="ProductController">
   <input type="number" class="form-control" placeholder="Search here" ng-model="priceterm" />
   <br/>
   <table class="table">
       <tr ng-repeat="b in products|priceGreaterThan:priceterm">
           <td>{{b.name}}</td>
           <td>{{b.price}}</td>
       </tr>
   </table>
</div>

これにより、下の画像に示すように、ビューにフィルタリングされた配列が表示されます。

以上がカスタムフィルターの作成方法です。それは簡単です – それらは、関数を返すために1つの入力とオプションのパラメータを受け取る関数に他なりません。楽しんで読んでいただければ幸いです!

Infragistics jQuery&HTML5コントロールを使用して、ブラウザ、デバイス、プラットフォームに制限のない、最新の応答性の高いWebアプリケーションを提供します。今すぐ無料トライアルをダウンロードして、そのパワーが実際に動作しているのを見てください!