angularjsフィルターの使い方は？ angularjsフィルターの使い方の紹介

この記事では主にangularjsフィルターの使用方法について詳しく説明しますが、angularjsフィルターの書式設定スタイルは他にもあります。次に、この記事を一緒に読んでみましょう。

まず angularjs フィルターの使用について話しましょう:

AnularJS フィルター は、ユーザーに表示する必要があるデータをフォーマットするために使用されます。多くの実用的な組み込みフィルターがあり、それらを自分で作成することもできます。 。

HTML のテンプレート バインディング シンボル {{ }} 内の | シンボルを使用してフィルターを呼び出します。たとえば、文字列

を大文字に変換したいとします。文字列内の各文字を個別に変換することも、フィルターを使用することもできます。

{{ name | uppercase }}

フィルターは、JavaScript コードの $filter を通じて呼び出すことができます。たとえば、JavaScript コードで小文字フィルターを使用する場合:

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

HTML 形式でフィルターを使用する場合、フィルターにパラメーターを渡す必要がある場合は、フィルター名の後にコロン

を追加するだけです。複数のパラメータがある場合は、各パラメータの後にコロンを追加できます。たとえば、数値フィルターでは、小数点以下の桁数を制限できます。フィルターの後に 2 を記述して、パラメーターとして 2 をフィルターに渡します。

<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}

1.currency

currrecy フィルターは数値を渡すことができます。通貨形式への形式。

123 を通貨形式に変換するには、{{ 123 | 通貨 }} を使用します。

通貨フィルターを使用すると、通貨記号を自分で設定できます。デフォルトでは、クライアントが存在する地域の通貨記号が使用されます

が、通貨記号をカスタマイズすることもできます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの

AngularJS 学習マニュアル

列にアクセスしてください)

2.date

日付フィルターは、日付を必要な形式にフォーマットできます。 AngularJS にはいくつかの日付形式が組み込まれています。いずれかの形式を使用するように

が指定されていない場合は、デフォルトで MediumDate 形式が使用されます。この形式は次の例に示されています。

サポートされている組み込みのローカライズされた日付形式は次のとおりです:

{{ today date:'medium' }}

• {{ 今日の日付:'short' }}

• {{ 今日の日付:'fullDate' }} <- - 2013 年 8 月 9 日木曜日 -->

• {{ 今日の日付:'longDate' }}

• {{ 今日の日付:' MediumDate ' }}

• {{ 今日の日付:'shortDate' }}

• { { 今日の日付:'mediumTime' }}

• {{ 今日の日付:'shortTime' }}

1 桁の年: {{ 今日の日付:'y' }}

• 月の書式設定

英語の月: {{ today | date:'MMMM' }} 英語の月の略称: {{ today | date:'MMMM' }}

月番号: {{ today |date:'MM' }}

年間の月数: {{ today |date:'M' } }

日付の書式設定

数値日付: {{ today|date:'dd' }}

月の日曜日: {{ 今日の日付:'d' }}

英語の週: {{ 今日の日付:'EEEE' }}

時間の形式

24 時間デジタル時間: {{today|date:' HH'} }

時刻: {{today|date:'H'}}

12 時間時計 数値時間: {{ today|date:'hh'}}

午前または午後の時間: {{today|date:'h'}}

分の書式設定

分数値: {{ 今日の日付:'mm' }}

時間の分: {{ 今日の日付:'m' }}

秒の書式設定

数値秒: {{ 今日 | 日付:'ss' }}

1 つの秒数分: {{ 今日の日付:' }} ミリ秒数: {{ 今日の日付:' }}