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' }} 09e28c49aad2a3c41f29a4df6a88e68e

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

• {{ 今日の日付:'fullDate' }} e80e0657d46b9cbc24cb5d7de1db799e

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

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

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

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

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

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

• 月の書式設定

英語の月: {{ today | date:'MMMM' }} 7ee77e53246386e408232298689b6a6b 英語の月の略称: {{ today | date:'MMMM' }} 4924bbb8eb4b0a4f29c98133128a396f

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

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

日付の書式設定

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

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

時間の形式

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

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

分の書式設定

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

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

秒の書式設定

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

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

カスタム日付形式の例をいくつか示します:

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

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

例如，用下面的过滤器可以选择所有包含字母e的单词：

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

如果要过滤对象，可以使用上面提到的对象过滤器。例如，如果有一个由people对象组成的

数组，每个对象都含有他们最喜欢吃的食物的列表，那么可以用下面的形式进行过滤：

{{ [{
'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 -->
{{ &#39;ginger loves dog treats&#39; | lowercase | capitalize }}

以上就是AngularJS过滤器的使用方法（想看更多就到PHP中文网，AngularJS使用手册栏目学习），有问题的可以在下方提问。

【小编推荐】

angularjs如何搭建开发环境？angularjs搭建开发环境的过程分析

angularjs怎么开发web应用？angularjs开发web应用实例

以上がangularjsフィルターの使い方は？ angularjsフィルターの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。