AngularJSフィルターの使い方の詳しい説明_AngularJS

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

HTML のテンプレート バインディング シンボル {{ }} 内の | シンボルを使用してフィルタを呼び出します。たとえば、文字列
を変換したいとします。 大文字に変換するには、文字列内の各文字を個別に変換するか、フィルターを使用できます:

{{ 名前 大文字 }}
フィルターは、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. 通貨
通貨フィルターは、数値を通貨形式にフォーマットできます。 123
を変換するには、{{ 123 | 通貨 }} を使用します 通貨形式に変換します。
通貨フィルターを使用すると、通貨記号を自分で設定できます。デフォルトでは、クライアントの地域の通貨記号が使用されます。
ただし、通貨記号をカスタマイズすることもできます。
2. 日付
日付フィルターは、日付を必要な形式にフォーマットできます。
ではない場合でも、AngularJS にはいくつかの日付形式が組み込まれています。 使用する任意の形式を指定します。デフォルトでは、mediumDate 形式が使用されます。この形式は次の例に示されています。
以下は、組み込みでサポートされているローカライズされた日付形式です:

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

年の形式
4 桁の年: {{ 今日の日付:'yyyy' }}
2 桁の年: {{ 今日の日付:'yy' }}
年: {{ 今日の日付:'y' }}
月の書式設定
英語の月: {{ 今日の日付:'MMMM' }}
英語の月の略称: {{ 今日の日付:'MMM' }}
数値の月: {{ today |date:'MM' }}
年間の月: {{ today |date:'M' }}
日付の形式
数値日付: {{ today|date:'dd' }}
月の日: {{ 今日の日付:'d' }}
英語の曜日: {{ 今日の日付:'EEEE' }}
英語の週の略語: {{ 今日の日付:'EEE' }}
時間の形式
24 時間デジタル時間: {{today|date:'HH'}}
時刻: {{today|date:'H'}}
12 時間デジタル時間: {{today|date:'hh'}}
午前または午後の時間: {{today|date:'h'}}
分の書式設定
分数値: {{ 今日の日付:'mm' }}
時刻: {{ 今日の日付:'m' }}
秒のフォーマット
数値秒: {{ 今日の日付: 'ss' }}
1 分後の秒: {{ 今日の日付: }}
ミリ秒数: {{ 今日の日付:'.sss' }}
カスタム日付形式の例をいくつか示します:

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

フィルター

filter フィルターは、指定された配列からサブセットを選択し、新しい配列を生成してそれを返すことができます。

たとえば、次のフィルタを使用して、文字 e を含むすべての単語を選択します:

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

オブジェクトをフィルタリングしたい場合は、上記のオブジェクト フィルタを使用できます。たとえば、人物オブジェクトで構成される
があるとします。 配列、各オブジェクトには好きな食べ物のリストが含まれており、次の形式でフィルタリングできます:

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

フィルタリングにカスタム関数を使用することもできます (この例では、関数は $scope で定義されています):

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

isCapitalized 関数の機能は、以下に示すように、最初の文字が大文字かどうかに応じて true または false を返すことです。

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

カスタムフィルター

まず、アプリケーション内で参照するモジュールを作成します

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

文の最初の文字を大文字に変換したい場合は、フィルターを使用して最初に文全体を大文字に変換できます。

と入力し、最初の文字を大文字に変換します。

<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}

The above is how to use AngularJS filters. I hope it will be helpful to everyone's learning.