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

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

⚡ スマートサマリー

AngularJS のフィルターは、基となるデータを変更することなく、式の値を表示用にフォーマットします。組み込みのフィルターは、大文字小文字、数値、通貨、JSON に対応しており、カスタムフィルターはフレームワークが提供していないあらゆるフォーマットルールを処理できます。

  • 🧾 基本原則: フィルターはビューに表示される内容のみを変換し、スコープオブジェクトに保持されている値は決して変更されません。
  • ➖ パイプ構文: 縦棒は式とフィルタ名を区切り、コロンは引数を渡します。
  • 🔤 ケースフィルター: 文字列を小文字と大文字に変換する機能は表示用であり、AngularJSには大文字化フィルターは存在しません。
  • 🔢 数字と通貨： 数値は小数点以下の桁数を制限し、通貨は値の前に地域に応じた記号を付加します。
  • 🛠️ カスタムフィルター: 関数を返すファクトリを登録すると、モジュール全体で利用可能な再利用可能なフィルタが作成されます。
  • ⚡ 純度が重要: フィルターは同じ入力に対して同じ出力を返さなければなりません。なぜなら、AngularJSは結果をキャッシュし、純粋なフィルターの再実行をスキップするからです。
プロフィール

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

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

A AngularJS でのフィルター この機能を使うと、式の値を変更せずに、ユーザーに表示するための書式を整えることができます。例えば、文字列を小文字または大文字で表示したい場合は、フィルターを使用できます。組み込みのフィルター「lowercase」や「uppercase」は、指定されたケースで文字列を返します。さらに、数値、通貨、JSON 用のフィルターも用意されています。

⚠️ バージョンノート： AngularJS（1.x ブランチ）は 2021 年 12 月 31 日にサポートが終了し、セキュリティ パッチは提供されなくなりました。以下の内容は、既存の AngularJS アプリケーションの保守には引き続き有効ですが、最新の Angular では、同じ役割はパイプによって担われています。

ビューでは、パイプ記号を使ってフィルターを適用します。それぞれのフィルターを見る前に、なぜ自分でフィルターを作成する必要があるのか​​を理解しておきましょう。

AngularJS の小文字フィルター

このフィルターは文字列を受け取り、その中のすべての文字を小文字で表示します。

以下では、コントローラがスコープオブジェクトを介して文字列をビューに送信し、フィルタがそれを小文字に変換します。

AngularJS の小文字フィルター

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>
</body>
</html>

Code 説明

  1. 大文字と小文字が混在した文字列「Angular JS」は、メンバー変数に格納されます。 tutorialName スコープオブジェクト上。
  2. フィルタ記号（|）は変換対象の出力を示し、 lowercase キーワードは、文字列全体を小文字に変換する組み込みフィルターを適用します。

⚠️ すべての掲載情報に修正が適用されました。 オリジナルの6つの例すべてに、3つの共通の欠陥があった。 chrset="UTF 8" は有効な属性またはエンコーディングではないため、現在は charset="UTF-8". angular-route.js ロードされました angular.min.jsこれはモジュールエラーを発生させ、実際には使用されていなかったため、削除されました。未使用のjQuery参照も同様に削除されています。また、テキストでは値が「AngularJS」と記載されていましたが、コードでは「Angular JS」に設定されていました。現在はテキストが一致しています。

出力：

AngularJS の小文字フィルター

大文字と小文字が混在する文字列は、すべて小文字で表示されます。逆の変換も同様に機能します。

AngularJS の大文字フィルター

このフィルターは小文字フィルターの対となるもので、すべての文字を大文字で表示します。

以下では、コントローラがスコープオブジェクトを介して文字列をビューに送信し、フィルタがそれを大文字に変換します。

AngularJS の大文字フィルター

<!-- The head and library references are unchanged from the previous example -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName | uppercase}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>

Code 説明

  1. 大文字と小文字が混在した文字列「Angular JS」は、 tutorialName そしてスコープオブジェクトにアタッチされます。
  2. フィルタ記号（|）の後には uppercase キーワードなので、組み込みのフィルターは文字列全体を大文字でレンダリングします。

⚠️ 訂正： 元の記事ではこのセクションを「小文字オプション付きのAngularJS大文字化フィルターの例」と紹介していましたが、これは二重に誤りです。このセクションでは大文字化フィルターを解説しており、AngularJSにはそもそも大文字化フィルターは存在しません。最初の文字だけを大文字にするにはカスタムフィルターが必要で、その作成方法は後のセクションで説明します。

出力：

AngularJS の大文字フィルター

大文字小文字を区別するフィルターは引数を取りません。次のフィルターは、コロンを使ってパラメーターをフィルターに渡す方法を示しています。

AngularJS の数値フィルター

このフィルターは数値の書式を設定し、表示される小数点以下の桁数を制限できます。

以下の例では、数値フィルターを使用して、小数点以下2桁に制限された値を表示します。コントローラーはスコープオブジェクトを介して数値をビューに送信し、ビューでフィルターが適用されます。

AngularJS の数値フィルター

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialID = 3.565656;
}]);
</script>

Code 説明

  1. 小数点以下の桁数が多い数値は、メンバー変数に格納されます。 tutorialID そしてスコープオブジェクトにアタッチされます。
  2. フィルタ記号（|）の後には number:2コロンは引数を渡し、2は小数点以下2桁を指定します。表示時には値が丸められるため、3.565656は3.57と表示されますが、スコープ内では元の数値が保持されます。

出力：

AngularJS の数値フィルター

数値が金額を表す場合、単に数値をフォーマットするだけでは不十分な場合が多く、次のフィルターはそのような場合に対応します。

関連記事

AngularJS の通貨フィルター

このフィルターは、数値を通貨値としてフォーマットし、$ などの通貨記号を接頭辞として追加します。

以下の例では、コントローラがスコープオブジェクトを介してビューに数値を送信し、ビューで通貨フィルタが適用されます。

AngularJS の通貨フィルター

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialprice = 20.56;
}]);
</script>

Code 説明

  1. 数値は、メンバー変数に格納されます。 tutorialprice そしてスコープオブジェクトにアタッチされます。
  2. フィルタ記号（|）の後には currency フィルタ。

⚠️ 訂正： 元の記述では、通貨は「マシンに適用されている言語設定に依存する」とされていましたが、そうではありません。AngularJS はライブラリにバンドルされているロケール (デフォルトでは en-US) を使用するため、オペレーティングシステムに関係なく記号は $ になります。 angular-locale_*.js ファイルを指定するか、シンボルを直接渡す： {{tutorialprice | currency:"£"}}.

出力：

AngularJS の通貨フィルター

文字列と数値は単純な値です。最後の組み込みフィルタは、オブジェクト全体を扱います。

AngularJS の JSON フィルター

このフィルターはオブジェクトをフォーマットされた形式に変換します JSONの これは、開発中にスコープデータを検査する際に役立ちます。

以下の例では、コントローラーがスコープオブジェクトを介してビューにオブジェクトを送信し、ビューでJSONフィルターが適用されます。

AngularJS の JSON フィルター

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" };
}]);
</script>

Code 説明

  1. 物体を保持する TutorialID: 12 (NAIST) と tutorialName: "Angular" というメンバ変数に格納されます tutorial そしてスコープオブジェクトにアタッチされます。
  2. フィルタ記号（|）の後には json オブジェクトをインデントされたJSONテキストにシリアル化するフィルター。

⚠️ 訂正： 元の記述ではこの値を「数値」および「JSON 型の文字列」と表現していましたが、どちらでもありません。 Javaスクリプトオブジェクトと、それを表示用のJSON文字列に変換するJSONフィルターです。

出力：

AngularJS の JSON フィルター

これら5つのフィルターは一般的なケースを網羅しています。これらのフィルターで必要な出力が得られない場合は、独自のフィルターを作成してください。

AngularJS カスタム フィルター

AngularJSに組み込まれているフィルターでは、出力フォーマットの要件を満たせない場合があります。そのような場合は、必要な形式で出力を返すAngularJSカスタムフィルターを作成できます。

カスタムフィルタはモジュールに登録され、組み込みフィルタとまったく同じように動作します。カスタムフィルタも同じパイプ構文を使用するため、以下のセクションではまず標準フィルタについて説明し、次にカスタムフィルタの作成方法を示します。

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

以下の例では、文字列が渡されます。 コントローラ スコープ オブジェクトを介してビューに渡されますが、そのまま表示されるべきではありません。 AngularJS 別の文字列を追加し、完成した結果を表示します。

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

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>

<script>
var app = angular.module('DemoApp', []);

// The factory runs once; the function it returns runs on every value
app.filter('Demofilter', function() {
  return function(input) {
    return input + " Tutorial";
  };
});

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = "Angular";
}]);
</script>

Code 説明

  1. 文字列「Angular」は、メンバー変数に格納されます。 tutorial そしてスコープオブジェクトにアタッチされます。
  2. AngularJSは filter カスタムフィルターを作成するために使用される登録方法。「Demofilter」はそのフィルターに付けられた名前であり、ビューはこの名前を参照します。
  3. これはカスタムフィルターの標準的な形状です。登録された関数は 工場 処理を実行する関数を返します。この関数は、フィルタリング対象の値を最初の引数として受け取り、結果を返します。ここでは、「Tutorial」が付加された入力値を返します。
  4. このフィルターは、組み込みフィルターと同様のパイプ構文を使用してビューに適用されます。

💡 ヒント： フィルター名は慣例として小文字またはキャメルケースです。「Demofilter」は機能しますが、次のような名前は appendTutorial 読みやすく、組み込みの名前との衝突も避けられます。

出力：

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

渡された文字列に「Tutorial」という単語が追加されました。 tutorial 変数。このフィルターは常に同じテキストを追加しますが、次のセクションでそのテキストを設定できます。

カスタムフィルターに引数を渡す方法

上記のフィルターは追加するテキストをハードコーディングするため、1つのことしかできません。組み込みフィルターなど number:2 コロンの後に続く引数を受け入れることができ、カスタムフィルターも同様です。最初のパラメーター以降のすべてのパラメーターは、ビュー内のコロンで区切られた引数にマッピングされます。

3つのステップがあります: パラメータを追加 input 返される関数では、オプションの引数にはデフォルト値を指定して、引数が省略された場合でもフィルタが機能するようにし、ビュー内の引数をコロンで区切って渡します。

app.filter('appendText', function() {
  return function(input, suffix, separator) {
    if (!input) { return input; }        // guard against undefined
    separator = typeof separator === 'undefined' ? ' ' : separator;
    return input + separator + suffix;
  };
});

すると、画面には「チュートリアル」が次のように表示されます。 suffix そしてハイフンは separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

見落としやすい点が2つあります。引数はAngularJSの式なので、リテラル文字列は引用符で囲む必要がありますが、引用符で囲まれていない単語はスコーププロパティとして読み込まれます。また、フィルターは連鎖しており、それぞれが前のフィルターの出力を受け取ります。 {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ 警告： フィルターは純粋に保つ必要があります。つまり、同じ入力に対して同じ出力が得られ、外部からの変更はありません。AngularJS は純粋なフィルターをキャッシュし、入力が変更された場合にのみ再実行します。クロックを読み取ったり、サービスを変更したりするフィルターは、マークする必要があります。 $statefulこれはキャッシュを無効にし、ダイジェストサイクルごとにフィルタを実行するため、ページの表示が遅くなる一般的な原因となります。

フィルターはテンプレートに限定されません。同じフィルターを以下の場所から呼び出すことができます。 Javaスクリプトは次の図のとおりです。

コントローラーで$filterサービスを使用してフィルターを使用する方法

ビューでフィルターを適用するのが一般的ですが、変換された値はコントローラー内で必要になる場合もあります。たとえば、サーバーにデータを送信する前などです。AngularJS は、組み込みフィルターとカスタムフィルターの両方を含む、登録されたすべてのフィルターを次のように公開します。 $filter サービスに注入し、フィルタ名を指定して呼び出してフィルタ関数を取得し、その関数を値と引数を指定して呼び出します。

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
  $scope.tutorial = "Angular";

  // Built-in filters, called from JavaScript
  $scope.shouted = $filter('uppercase')($scope.tutorial);      // "ANGULAR"
  $scope.price   = $filter('currency')(20.56);                 // "$20.56"

  // A custom filter works exactly the same way
  $scope.full    = $filter('appendText')($scope.tutorial, "Tutorial");
}]);

より短い形式も存在します。フィルター名に続いて Filter、 といった uppercaseFilterはフィルター関数を直接提供し、すぐに呼び出すことができます。どちらの形式も同じ関数に解決されるため、選択はスタイルの問題です。

2 つの用途が繰り返し出てきます。1 つ目はペイロードの準備です。日付は通常、固定パターンで API に到達する必要があり、 $filter('date')(value, 'yyyy-MM-dd') フォームにバインドされた値に触れることなく生成します。2つ目は、コントローラー内でコレクションを絞り込むことです。 orderBy で NGリピート ダイジェストごとに再実行される式。

このように注入されたフィルターはモジュールに登録されたままなので、カスタムフィルターは次のように宣言する必要があります。 app.filter 管制官が質問する前に $filter そうしないと、AngularJS は不明なプロバイダーエラーをスローします。

フィルターを呼び出す Javaスクリプトはテンプレートと重要な点で異なります。それは、結果が一度計算されてスコープに保存され、ダイジェストごとに再計算されないことです。そのため、めったに変更されない値には高速なオプションとなりますが、頻繁に変更される値には適していません。 track ユーザー入力。

よくあるご質問

いいえ。AngularJSは小文字と大文字のみに対応しています。各単語の最初の文字を大文字にするには、文字列を分割して再構築するカスタムフィルター、または変更が純粋に視覚的なものであればCSSのtext-transformルールを使用する必要があります。

フィルターがng-appによってブートストラップされたモジュールとは別のモジュールに登録されているか、またはフィルターを定義するスクリプトがAngularJSの読み込み前に実行されています。フィルターを同じモジュールに登録し、ライブラリを先に読み込んでください。

はい。パイping コレクションの中に NGリピート フィルターは、アイテムをレンダリングする前に、アイテムをフィルタリングまたは並べ替えます。フィルターは配列全体を受け取り、配列を返す必要があります。

Yes. AI アシスタントは、書式設定ルールの平易な記述から、ファクトリ、返される関数、およびビュー構文を生成します。生成されたフィルタが未定義の入力を防止していることを確認してください。

AIツールはファクトリをPipeTransformを実装するクラスとして書き換え、追加のパラメータをそれぞれtransformメソッドに移動します。 Rev不純なパイプは明示的に宣言する必要があるため、$stateful フィルターは手動で確認してください。

この投稿を要約すると次のようになります: