AngularJS フィルターと AngularJS カスタムフィルターと例

AngularJSのフィルターとは何ですか?

A AngularJS でのフィルター 元の形式を変更せずに、式の値を形式設定してユーザーに表示するのに役立ちます。たとえば、文字列を小文字または大文字にしたい場合は、フィルターを使用してそれを行うことができます。「小文字」、「大文字」などの組み込みフィルタがあり、それに応じて小文字と大文字の出力を取得できます。

AngularJS カスタムフィルター

Angular の組み込みフィルターでは、出力のフィルター処理のニーズや要件を満たせない場合があります。このような場合、必要な方法で出力を渡すことができる AngularJS カスタムフィルターを作成できます。

同様に、数値の場合、他のフィルターを使用できます。このチュートリアルでは、Angular で使用できるさまざまな標準組み込みフィルターについて説明します。

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

以下のカスタムフィルター AngularJS の例では、スコープオブジェクトを介してコントローラーからビューに文字列を渡しますが、文字列をそのまま表示することは望ましくありません。

文字列を表示するときは必ずカスタムフィルターを渡すようにしたいと考えています。 AngularJSこれにより、別の文字列が追加され、完成した文字列がユーザーに表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

コードの説明

ここでは、tutorial というメンバー変数に文字列「Angular」を渡し、それをスコープオブジェクトにアタッチしています。
Angular は、カスタムフィルターの作成に使用できるフィルターサービスを提供します。「Demofilter」はフィルターに付けられた名前です。
これは、関数が返される AngularJS のカスタムフィルターを定義する標準的な方法です。この関数には、カスタムフィルターを作成するためのカスタムコードが含まれています。私たちの関数では、ビューからフィルターに渡される文字列「Angular」を取得し、これに文字列「Tutorial」を追加しています。
コントローラーからビューに渡されたメンバー変数に対してデモフィルターを使用しています。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

カスタムフィルターが適用されていることがわかります。
メンバー変数tutorialに渡された文字列の末尾に「Tutorial」という単語が追加されています。

AngularJS の小文字フィルター

このフィルターは文字列出力を受け取り、文字列をフォーマットし、文字列内のすべての文字を小文字で表示します。

AngularJS を小文字に変換するオプションを使用した AngularJS フィルターの例を見てみましょう。

以下の例では、コントローラーを使用して、スコープオブジェクト経由でビューに文字列を送信します。次に、ビューでフィルターを使用して文字列を小文字に変換します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

コードの説明

ここでは、小文字と大文字を組み合わせた文字列を「tutorialName」というメンバー変数に渡し、それをスコープオブジェクトにアタッチしています。渡される文字列の値は「AngularJS」です。
メンバー変数「tutorialName」を使用し、フィルター記号 (|) を入れています。これは、フィルターを使用して出力を変更する必要があることを意味します。次に、 lowercase キーワードを使用して、組み込みフィルターを使用して文字列全体を小文字で出力するように指示します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から

変数tutorialNameに渡された小文字と大文字を組み合わせた文字列「AngularJS」が実行されていることがわかります。
実行後の最終出力は、上に示すように小文字になります。

AngularJS の大文字フィルター

このフィルターは小文字フィルターに似ています。違いは、文字列出力を受け取り、その文字列をフォーマットし、文字列内のすべての文字を大文字で表示することです。

小文字オプションを使用した AngularJS の大文字化フィルターの例を見てみましょう。

以下の AngularJS の大文字化の例では、コントローラーを使用して、スコープオブジェクト経由でビューに文字列を送信します。次に、ビューでフィルターを使用して文字列を大文字に変換します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

コードの説明

ここでは、小文字と大文字を組み合わせた文字列「Angular JS」を「tutorialName」というメンバー変数に渡し、スコープオブジェクトにアタッチしています。
メンバー変数「tutorialName」を使用し、フィルター記号 (|) を入れています。これは、フィルターを使用して出力を変更する必要があることを意味します。次に、uppercase キーワードを使用して、組み込みフィルターを使用して文字列全体を大文字で出力するように指示します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

変数tutorialNameに渡された小文字と大文字の組み合わせの文字列がすべて大文字で出力されていることがわかります。

AngularJS の数値フィルター

このフィルターは数値をフォーマットし、数値の小数点に制限を適用できます。

数値オプションを使用した AngularJS フィルターの例を見てみましょう。

以下の例では、

数値フィルターを使用して、小数点以下 2 桁の制限を設けて表示する数値を書式設定する方法を紹介したいと思いました。

コントローラーを使用して、スコープオブジェクト経由でビューに数値を送信します。次に、ビューでフィルターを使用して数値フィルターを適用します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

コードの説明

ここでは、tutorialID というメンバー変数に小数点以下の桁数が大きい数値を渡し、それをスコープオブジェクトにアタッチしています。
メンバー変数tutorialIDを使用し、数値フィルターとともにフィルター記号(|)を入れています。ここで、number:2 の 2 は、フィルターが小数点以下の桁数を XNUMX に制限する必要があることを示しています。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

変数tutorialIDに渡された小数点以下の数値は、適用されたフィルターの数が2であるため、小数点以下2桁に制限されていることがわかります。

AngularJS の通貨フィルター

このフィルタは、通貨フィルタを数値にフォーマットします。

$ などの通貨を使用して数値を表示したい場合は、このフィルターを使用できるとします。

以下の例では、コントローラーを使用して、スコープオブジェクト経由でビューに数値を送信します。次に、ビュー内のフィルターを使用して現在のフィルターを適用します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

コードの説明

ここでは、tutorialprice というメンバー変数に数値を渡し、それをスコープオブジェクトにアタッチしています。
メンバー変数tutorialpriceを使用し、通貨フィルターとともにフィルター記号(|)を入れています。適用される通貨は、マシンに適用されている言語設定によって異なることに注意してください。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から

変数tutorialpriceに渡された数値に通貨記号が追加されていることがわかります。
この例では、言語設定が英語 (米国) であるため、通貨として $ 記号が挿入されます。

AngularJS の JSON フィルター

このフィルタは、 JSONの入力と同様に、AngularJS JSON フィルターを適用して JSON で出力します。

以下の例では、コントローラーを使用して、JSON タイプのオブジェクトをスコープオブジェクト経由でビューに送信します。次に、ビュー内のフィルターを使用して JSON フィルターを適用します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

コードの説明

ここでは、「tutorial」というメンバー変数に数値を渡し、それをスコープオブジェクトにアタッチしています。このメンバー変数には、Tutorial ID:12、TutorialName:”Angular” の JSON 型文字列が含まれます。
メンバー変数チュートリアルを使用し、JSON フィルターとともにフィルター記号 (|) を追加します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

文字列のようなJSONが解析され、ブラウザに適切なJSONオブジェクトが表示されていることがわかります。

まとめ

フィルターは、出力がユーザーに表示される方法を変更するために使用されます。
Angular は、文字列の出力をそれぞれ小文字と大文字に変更するための小文字フィルターと大文字フィルターなどの組み込みフィルターを提供します。
数値フィルターを使用して、数値に表示される小数点の数を指定して、数値の表示方法を変更することもできます。
通貨フィルターを使用して、任意の数値に通貨記号を追加することもできます。
JSON 固有の出力が必要な場合、Angular は JSON のような文字列を JSON 形式にフィルタリングするための JSON フィルターも提供します。
angular で定義されたフィルターのいずれでも満たされない要件がある場合は、カスタムフィルターを作成し、カスタムコードを追加して、フィルターから必要な出力の種類を決定できます。

よろしければ：

AngularJSのフィルターとは何ですか?

AngularJS カスタム フィルター

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

コードの説明

関連記事

AngularJS の小文字フィルター

コードの説明

AngularJS の大文字フィルター

コードの説明

AngularJS の数値フィルター

コードの説明

AngularJS の通貨フィルター

コードの説明

AngularJS の JSON フィルター

コードの説明

まとめ

AngularJS カスタムフィルター

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