AngularJS学習の道——フィルタ(1)

フィルタ
フィルタを使用して、ユーザーに表示する必要があるデータをフォーマットします.使用方法:|でデータのフォーマットを行います.この{name|uppercase}}を例にとると,|前はフィルタリングが必要な内容,|後はフィルタリングのルールであり,このフィルタは前のnameデータを大文字に変換することを意味する.
内蔵フィルタ
currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy
1.currency
Currencyフィルタは、数値を通貨フォーマットにフォーマットできます.

{{ 123 | currency }}             
{{ 123 | currency:'￥' }}        

2.date
dateフィルタは、日付を必要なフォーマットにフォーマットできます.

js:
$scope.today = new Date().getTime();

html:
{{ today | date:'medium' }} 
{{ today | date:'short' }} 
{{ today | date:'fullDate' }} 
{{ today | date:'longDate' }} 
{{ today | date:'mediumDate' }}
{{ today | date:'shortDate' }} 
{{ today | date:'mediumTime' }}
{{ today | date:'shortTime' }} 

年フォーマット

    ：{{ today | date:'yyyy' }} 
    ：{{ today | date:'yy' }} 
    ：{{ today | date:'y' }} 

月次フォーマット

    ：{{ today | date:'MMMM' }} 
      ：{{ today | date:'MMM' }} 
    ：{{ today |date:'MM' }} 
         ：{{ today |date:'M' }} 

日付フォーマット

    ：{{ today|date:'dd' }} 
        ：{{ today | date:'d' }} 
    ：{{ today | date:'EEEE' }} 
      ：{{ today | date:'EEE' }} 

時間フォーマット

24       ：{{today|date:'HH'}} 
         ：{{today|date:'H'}} 
12       ：{{today|date:'hh'}} 
           ：{{today|date:'h'}} 

分フォーマット

     ：{{ today | date:'mm' }} 
          ：{{ today | date:'m' }} 

秒数フォーマット

    ：{{ today | date:'ss' }} 
        ：{{ today | date:'s' }} 
   ：{{ today | date:'.sss' }} 

文字フォーマット

     ：{{ today | date:'a' }} 
      ：{{ today | date:'Z' }} 

カスタム日付フォーマット

{{ today | date:'MMMd, y' }} 
{{ today | date:'EEEE, d, M' }} 
{{ today | date:'hh:mm:ss.sss' }} 

3.filter
filterフィルタは、所与の配列からサブセットを選択し、新しい配列を生成して返すことができます.このフィルタは、通常、表示する必要がある要素をフィルタするために使用されます.
4.json
sonフィルタは、JSONまたはJavaScriptオブジェクトを文字列に変換できます.

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}

5.limitTo
LimitToフィルタは、入力されたパラメータに基づいて新しい配列または文字列を生成します.新しい配列または文字列の長さは、入力されたパラメータに依存し、入力されたパラメータの正負値によって、前から切り取るか、後から切り取るかを制御します.

{{ San Francisco is very cloudy | limitTo:3 }}


{{ San Francisco is very cloudy | limitTo:-6 }}


{{ ['a','b','c','d','e','f'] | limitTo:1 }}

6.lowercase
lowercaseフィルタは文字列を小文字に変換します.
7.uppercase
uppercaseフィルタは文字列を大文字に変換します.
8.number
numberフィルタは、数値をテキストにフォーマットします.2番目のパラメータはオプションで、小数点以下で切り取られる桁数を制御します(数値以外の文字が入力されると、空の文字列が返されます).

{{ 123456789 | number }}


{{ 1.234567 | number:2 }}

9.orderBy
orderByフィルタは、指定した配列を式でソートできます.orderByは2つのパラメータを受け入れることができ、1つ目は必要で、2つ目はオプションです.最初のパラメータは、配列のソート方向を決定するための述語です.
最初のパラメータのタイプ

関数最初のパラメータが関数である場合、この関数はソート対象のgetterメソッドとして扱われます.

文字列がこの文字列を解析した結果、配列要素のソート方向が決定されます.+または-を入力して、昇順または降順の配列を強制することができます.

配列は、配列式で述語として配列要素を使用します.式の結果と厳密に等しくない要素ごとに、最初の述語が使用されます.

2番目のパラメータは、ソートの方向(逆方向かどうか)を制御するために使用されます.

{{ [{
   'name': 'Ari',
   'status': 'awake'
   },{
   'name': 'Q',
   'status': 'sleeping'
   },{
   'name': 'Nate',
   'status': 'awake'
   }] | orderBy:'name' }}


      true