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' }} 2454eba55ce5af447d63d506f0b22009
2 桁の年: {{ 今日の日付:'yy' }} ac8ae5c416383e689e62a98e07653199
年: {{ 今日の日付:'y' }} 2454eba55ce5af447d63d506f0b22009
月の書式設定
英語の月: {{ 今日の日付:'MMMM' }} 938d31e4fc6bb13b4deb435f06bd0690
英語の月の略称: {{ 今日の日付:'MMM' }} 938d31e4fc6bb13b4deb435f06bd0690
数値の月: {{ today |date:'MM' }} 53031c7c3fbdb98da663f829dbcbec99
年間の月: {{ today |date:'M' }} 0d07dfb83b43f33ffd3d813164ae49ba
日付の形式
数値日付: {{ today|date:'dd' }} bdf347c31d338c5559ea24febd3d6d74
月の日: {{ 今日の日付:'d' }} 10f30089400a4cdc8cfbd8d11fd537ef
英語の曜日: {{ 今日の日付:'EEEE' }} 76aa457ce2f6ff8af8e176ae46c8f3bc
英語の週の略語: {{ 今日の日付:'EEE' }} ea058d0751acaf64361b1abb55a9f5e4
時間の形式
24 時間デジタル時間: {{today|date:'HH'}}
時刻: {{today|date:'H'}}
12 時間デジタル時間: {{today|date:'hh'}} fb30a4b0d26192a15972624ccb337852
午前または午後の時間: {{today|date:'h'}} fb30a4b0d26192a15972624ccb337852
分の書式設定
分数値: {{ 今日の日付:'mm' }} bdf347c31d338c5559ea24febd3d6d74
時刻: {{ 今日の日付:'m' }} 10f30089400a4cdc8cfbd8d11fd537ef
秒のフォーマット
数値秒: {{ 今日の日付: 'ss' }} 779138eee8ec233d5f15002382413251
1 分後の秒: {{ 今日の日付: }} dfa9fc8a6a43443cb66797c35cf883e1
ミリ秒数: {{ 今日の日付:'.sss' }} 132404d696749dd146bc462e6ef8004e
カスタム日付形式の例をいくつか示します:

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