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

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

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

AngularJS カスタム フィルター

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

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

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">

    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>

コードの説明

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

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

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

出力から、

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

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 | lowercase}}

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

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

</body>
</html>

コードの説明

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

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

AngularJS の小文字フィルター

出力から

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

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>

コードの説明

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

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

AngularJS の大文字フィルター

出力から、

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

AngularJS の数値フィルター

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

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

以下の例では、

数値フィルターを使用して、小数点以下 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 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>

コードの説明

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

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

AngularJS の数値フィルター

出力から、

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

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 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>

コードの説明

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

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

AngularJS の通貨フィルター

出力から

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

AngularJS の JSON フィルター

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

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

AngularJS の 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>

コードの説明

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

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

AngularJS の JSON フィルター

出力から、

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

まとめ

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