English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

AngularJsのフィルタ（filter）の詳細な説明に進む

フィルタ（フィルタ）はその名の通り、入力を受け取り、特定のルールで処理し、処理された結果を返します。主にデータのフォーマット化に使用され、例えば配列のサブセットを取得したり、配列の要素をソートするなどです。ngにはいくつかのフィルタが内蔵されています：currency（通貨）、date（日付）、filter（部分一致）、json（JSONオブジェクトのフォーマット化）、limitTo（制限数）、lowercase（小文字）、uppercase（大文字）、number（数字）、orderBy（ソート）。計9種類あります。これに加えて、カスタムフィルタも定義できます。これは非常に強力で、どんなデータ処理の要求にも対応できます。

フィルタの内容は非常にシンプルで、内蔵のフィルタの使用方法を理解し、自分でフィルタを定義するだけでOKです。今日は系統的に学習しましたので、以下に紹介します。

フィルタの使用方法の2種類

1テンプレート内でフィルタを使用

フィルタを使用する方法は以下の通りです。{{}}内で直接フィルタを使用し、表現の後ろに|を使用して区切ります。

{{ expression | フィルタ }}

複数のフィルタを連結して使用することもできます。前のフィルタの出力は次のフィルタの入力として使用されます（これがパイプラインのように見える理由ですね。。）

{{ expression | フィルタ1 | filter}}2 | ... }}

フィルタは引数を受け入れ、引数は:で区切られます。以下のようになります：

{{ expression | filter:argument1:argument2:... }}

データのフォーマット化だけでなく、ディレクティブ内でもフィルタを使用できます。例えば、配列arrayに対してフィルタ処理を行い、それをループで出力する場合があります：

<span ng-repeat="a in array | filter ">

2. コントローラーやサービス内でフィルタを使用

私たちのJavaScriptコード内でもフィルタを使用できます。方法は馴染みのある依存注入の方法で、例えばcontrollerでcurrencyフィルタを使用する場合、それをcontrollerに注入するだけで良いです。以下のようになります：

app.controller('testC',function($scope,currencyFilter){
 $scope.num = currencyFilter(123534); 
}

テンプレート内で{{num}}を使用すると、直接$を表示できます。123,534フィルタを使用する場合もサービス内で同じ原理が適用されます。

この時、controllerで複数のフィルタを使用する場合、それぞれを注入する必要があるのでしょうか？それはちょっと面倒ですね。兄弟、焦らずに~ngは必要なフィルタを呼び出すための$filterサービスを提供しており、$filterを注入するだけで十分です。使い方は以下の通りです：

app.controller('testC',function($scope,$filter){
 $scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date()); 
}

同じ効果が得られます。利点は、異なるフィルタを使用するのが便利になることです。

ngの内蔵フィルタ

ngは9種類のフィルタを内蔵しており、使い方は非常に簡単で、ドキュメントを見ればすぐに理解できます。ただし、今後ドキュメントを参照しないようにするため、ここに詳細な記録を残します。

1. currency (通貨処理)

currencyを使用すると、数字を通貨にフォーマット化できます。デフォルトはドル記号ですが、必要に応じて自分のシンボルを入力できます。例えば、私は中国元を入力しました：

{{num | currency : '￥'}}

2. date (日付フォーマット化)

オリジナルのJavaScriptは日付のフォーマット化能力が限られていますが、ngが提供するdateフィルタは一般的なフォーマット化要求を満たすことができます。使い方は以下の通りです：

{{date | date : 'yyyy'}}-MM-dd hh:mm:ss EEEE}}}

引数は必要な形式を指定します。y M d h m s Eは、年 月 日 時 分 秒 曜日を表し、それらを自由に組み合わせることができます。また、桁数を制限するために異なる数の使用もできます。さらに、特定の描述的な文字列を使用することもできます。例えば、「shortTime」を使用すると、時間を以下のようにフォーマットします12:05 pmのようなもの。ngは8種類の描述的な文字列を提供していますが、個人的には少し余計だと思います。私は自分の意志で好きな形式を作成することができますし、これらの単語を覚える必要はありません。

3.filter（マッチングサブストリング）

この名前のfilterというフィルタ（名前がよく分かりにくいですよね——！）は、配列を処理し、特定のサブストリングを含む要素をフィルタリングしてサブ配列として返します。文字列配列やオブジェクト配列のどちらでも使用できます。オブジェクト配列の場合、属性の値をマッチングできます。サブストリングのマッチングルールを定義する引数を受け取ります。以下に例を示します：

$scope.childrenArray = [
  {name:'kimi',age:3},
  {name:'cindy',age:4},
  {name:'anglar',age:4},
  {name:'shitou',age:6},
  5}
 ]
$scope.func = function(e){return e.age}4;}

{{ childrenArray | filter : 'a' }} //属性値に含まれているaの
{{ childrenArray | filter : 4 }} //属性値に含まれている4の
{{ childrenArray | filter : {name : 'i'} }} //引数はオブジェクトで、name属性にiが含まれているものをマッチングします
{{childrenArray | filter : func }} //引数は関数で、返されるageを指定します4の

4.json（フォーマット化されたJSONオブジェクト）

JSONフィルタはJSオブジェクトをJSON文字列に形式化することができます。引数はありません。これは何の役に立つのでしょうか、私は通常JSON文字列をページに表示することはありません。公式サイトによると、デバッグに使用できるとあります、いい選択ですね。または、JSで使用することもできます。JSON.stringify()と同じ役割を果たします。使い方は非常に簡単です：

{{ jsonTest | json}}

5. limitTo(配列の長さまたは文字列の長さを制限)

limitToフィルタは、配列や文字列をカットするために使用されます。引数を指定してカットする長さを指定します。引数が負の値の場合、配列の末尾からカットします。個人的にはこのフィルタが非常に役に立たないと感じています。まず、配列や文字列の先頭からカットできるだけで、/の末尾からカットします。次に、jsのオリジナルの関数がそれに代用できます。使い方を見てみましょう：

{{ childrenArray | limitTo : 2 }} //配列の最初の两项を表示します

6. lowercase(小文字)

データをすべて小文字に変換します。非常に単純で、説明は不要です。非常に役に立たないフィルタの一つです。引数はありません。文字列全体を小文字に変換することができますが、指定することができません。どう使うかについての説明は省略します。

7. uppercase(大文字)

同様です。

8. number(数字のフォーマット)

numberフィルタは、数字に千の区切りを追加することができます、例えば、123,456,789。また、float型の小数点以下の桁数を指定することができます：

{{ num | number : 2 }}

9. orderBy(ソート)

orderByフィルタは、配列の要素をソートするために使用できます。一つの引数を受け取り、ソート基準を指定します。引数は、属性名をソートするための文字列、ソート属性を定義するための関数、または属性値に基づいて順次ソートするための配列であります。上記の子供の配列を例に取ってみます：

<div>{{ childrenArray | orderBy : 'age' }}</div>/div>  //age属性値に基づいてソートします、もしない場合-ageが逆順
<div>{{ childrenArray | orderBy : orderFunc }}</div>/div> //関数の返り値に基づいてソートします
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>/div> //ageが同じ場合、nameでソートします

内蔵のフィルタの紹介が終わった、書いていると眠くなってくる。。。あなたが見たように、ngの内蔵フィルタも万能ではありません。実際には多くが非常に役に立たないものです。より個別的なニーズに対して、自分自身でフィルタを定義する必要があります。以下に、どうやってカスタムフィルタを定義するかを見てみましょう。

カスタムフィルタ

フィルタのカスタマイズ方法もとても簡単です。moduleのfilterメソッドを使用して、引数を受け取り、処理された結果を返す関数を返します。言葉は長くなりますが、実際に書いてみましょう。例えば、配列の奇数インデックスの要素を返すフィルタが必要な場合は、以下のようにコードを記述します：

app.filter('odditems',function(){
 return function(inputArray){
  var array = [];
  for(var i=0;i<inputArray.length;i++{
   if(i%2!==0){
    array.push(inputArray[i]);
   }
  }
  return array;
 }
});

フォーマットはこれです。あなたの処理ロジックは内部のクロージャーファンクションに書かれています。あなたのフィルタが引数を受け取るようにすることもできます。引数は、returnのその関数で定義され、第2引数として、またはもっと多くの引数としてもできます。

フィルタ的基本的な知識はこれだけです。以前にも言ったように、さらに学ぶべきことはプロジェクトの実際の挑戦です。それでは、プロジェクトが来る前に、基礎を固めておきましょう~

これで本文のすべてが終わりです。皆さんの学習に役立つことを願っています。また、呐喊教程を多くの皆様にサポートしていただけますようにお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に提供された内容であり、本サイトは所有権を有しません。人工的な編集は行われていません。著作権侵害の疑いがある場合は、メールで notice#w までお知らせください。3codebox.com（メール送信時、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは即座に侵害される可能性のある内容を削除します。）

基本チュートリアル
おすすめ