2013年12月6日 星期五

Angular Js Part III : Filter

原本第三篇是要寫Directive自訂控制項或者是Scope的，
但是那些都必須要再整理過，
因此先寫一篇無關痛癢的Filter吧~

Angular Js提供多種Filter可使用。

  • Currency：用來將數字轉換成貨幣
  • Date：轉換成特定日期格式
  • Filter：篩選機制，有點像是AutoComplete
  • Json：將物件轉換成Json字串。
  • limitTo：限制輸出的長度
  • lowercase、uppercase：轉換為大小寫
  • number：轉換為數字格式，並決定小數點後位數。
  • orderBy：排序，超強。
Currency 除了可以加上$字號外，也可以自定義貨幣的名稱。
單純就是如字串般加在數值前面。
currency_expression :放數值或model
symbol:可放自訂的貨幣名稱

原始碼：
---------- Currency Sample ----------<br>
{{ currency_expression | currency[:symbol] }}
<input type="number" ng-model="amount" ng-init="amount=120"> <br>
default currency symbol ($): {{amount | currency}}<br>
custom currency identifier (TWD$): {{amount | currency:"TWD$"}}

範例：
---------- Currency Sample ----------

{{ currency_expression | currency[:symbol] }}


default currency symbol ($): {{amount | currency}}

custom currency identifier (TWD$): {{amount | currency:"TWD$"}}

Date 的使用很廣，若使用的input type為date的話就可以省去相當多的問題，
並且可以直接轉換。如果不是，input內必須輸入標準格式，才能正確有效的轉換為Date。
date_expression 有兩種格式：
  1. 1970-01-01開始至今的秒數ex.1288323623006
  2. 2013-12-05T02:47(Z)
format有超多，所以請點選連結參考format。

原始碼：
---------- Date Sample ----------<br>
{{ date_expression | date[:format]}}
<span ng-non-bindable>{{2013-12-05T02:47 | date:'medium'}}</span>:
{{'2013-12-05T02:47' | date:'medium'}}<br>
<input type="text" ng-model="dateModel" ng-init="dateModel='2013-12-05T02:47Z'">
{{dateModel | date:'yyyy-MM-dd HH:mm:ss Z'}}<br>
<span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}<br>
範例：
---------- Date Sample ----------

{{ date_expression | date[:format]}}
{{2013-12-05T02:47 | date:'medium'}}:
{{'2013-12-05T02:47' | date:'medium'}}


{{dateModel | date:'yyyy-MM-dd HH:mm:ss Z'}}

{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}:
{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}


Filter 提供了相當彈性的篩選機制，模糊比對的能力真的蠻強的。可以決定要篩選的欄位以及否要完全比對；相當好用。
array：目標array
expression：篩選對象
comparator：是否完全比對(bool)

原始碼：
<div ng-init="friends = [{name:'John', phone:'555-1276'},
 {name:'Mary', phone:'800-BIG-MARY'},
 {name:'Mike', phone:'555-4321'},
 {name:'Adam', phone:'555-5678'},
 {name:'Julie', phone:'555-8765'},
 {name:'Juliette', phone:'555-5678'}]"></div>
<div ng-non-bindable>
 ---------- Filter Sample ----------<br>
 {{ array| filter:expression:comparator }}<br>
</div>
<!-- 定義一個model為search, search.$代表mapping到model所有子項 -->
Any: <input ng-model="search.$"> <br>
<!-- 只搜尋name的話就必須輸入在model為search.name的textbox -->
Name only <input ng-model="search.name"><br>
Phone only <input ng-model="search.phone"><br>
<!-- 用來決定是否完整比對 -->
Equality <input type="checkbox" ng-model="strict"><br>
<table id="searchObjResults">
 <tr><th>Name</th><th>Phone</th></tr>
 <tr ng-repeat="friend in friends | filter:search:strict">
  <td>{{friend.name}}</td>
  <td>{{friend.phone}}</td>
 </tr>
</table>
範例：

---------- Filter Sample ----------

{{ array | filter:expression:comparator }}


Any:


Name only

Phone only


Equality

NamePhone
{{friend.name}} {{friend.phone}}

Json 提供將物件轉換成Json字串，其實我還沒參透~參透再補充。
原始碼：
---------- Json Sample ----------<br>
{{ json_expression | json }}
<div ng-model="JsObjects" ng-init="JsObjects=[{name:'John', phone:'555-1276'},
 {name:'Mary', phone:'800-BIG-MARY'},
 {name:'Mike', phone:'555-4321'},
 {name:'Adam', phone:'555-5678'},
 {name:'Julie', phone:'555-8765'},
 {name:'Juliette', phone:'555-5678'}]"></div>
<!-- 說是用來把Object轉成json字串的= =  -->
<p>{{ JsObjects | json }}</p>
範例：
---------- Json Sample ----------

{{ json_expression | json }}
{{ JsObjects | json }}

limitTo 則是決定輸出的長度。

limitTo_input：為原始輸入內容(可以為array)
limit則為：指定的長度。

原始碼：
---------- LimitTo Sample ----------<br>
{{ limitTo_input | LimitTo: limit}}
<div ng-model="arrayObject" ng-init="arrayObject=[
{id:1,name:'aaa'},
{id:2,name:'bbb'},
{id:3,name:'ccc'},
{id:4,name:'ddd'},
{id:5,name:'eee'}]"></div>
<div ng-model="stringObject" ng-init="stringObject='abcdefghijklm'"></div>
Limit {{arrayObject}} to : <input type="integer" ng-model="numLimit" ng-init="numLimit=3">
<!-- 只輸出前三項 -->
<p>Output arrayObject: {{ arrayObject | limitTo:numLimit }}</p>
Limit {{stringObject}} to: <input type="integer" ng-model="letterLimit" ng-init="letterLimit=3">
<!-- 只輸出前三項 -->
<p>Output stringObject: {{ stringObject | limitTo:letterLimit }}</p>
<hr>

範例：
---------- LimitTo Sample ----------

{{ limitTo_input | LimitTo: limit}}
Limit {{arrayObject}} to :

Output arrayObject: {{ arrayObject | limitTo:numLimit }}
Limit {{stringObject}} to:

Output stringObject: {{ stringObject | limitTo:letterLimit }}

lowercase、uppercase 簡單易懂，就是將字母轉換成為小寫或大寫。

原始碼：
---------- lowercase uppercase Sample ----------<br>
{{ lowercase_expression | lowercase }}<br>
{{ uppercase_expression | uppercase }}
<div ng-model="str" ng-init="str='AbcDefGhiJKL'">
<!-- 轉換成小寫 -->
 str was {{str}} after lowercase : {{str | lowercase }}<br>
<!-- 轉換成大寫 -->
 str was {{str}} after lowercase : {{str | uppercase }}
</div>
範例：
---------- lowercase uppercase Sample ----------
{{ lowercase_expression | lowercase }}
{{ uppercase_expression | uppercase }}
str was {{str}} after lowercase : {{str | lowercase }}
str was {{str}} after lowercase : {{str | uppercase }}

number 可以把字串轉為數字，並決定要輸出小數點後幾位。
input：字串
fractionSize：小數點後幾位

原始碼：
---------- number Sample ----------<br>
{{ input | number[:fractionSize] }}
<div>
 Enter number: <input ng-model='val' ng-init="val=123.456789"><br>
<!-- 可篩選是否為數字 -->
 Default formatting: {{val | number}}<br>
<!-- 沒有小數點number:0 -->
 No fractions: {{val | number:0}}<br>
<!-- 轉為負值-val，且小數點以後四位 number:4 -->
 Negative number: {{-val | number:4}}
</div>

範例：
---------- number Sample ----------

{{ input | number[:fractionSize] }}
Enter number:

Default formatting: {{val | number}}

No fractions: {{val | number:0}}

Negative number: {{-val | number:4}}

orderBy 可以排序欄位，亦可決定是否反序。

orderBy_array：排序的標的array
predicate：目標欄位。
reverse：是否反轉

原始碼：
---------- orderBy Sample ----------<br>
{{ orderBy_array | orderBy:predicate:reverse }}
<div ng-init="afriends=[{name:'a01',age:'14'},
     {name:'a02',age:'36'},
     {name:'a03',age:'55'},
     {name:'b01',age:'86'},
     {name:'b02',age:'94'},
     {name:'b03',age:'76'},
     {name:'c01',age:'65'},
     {name:'c02',age:'44'},
     {name:'c03',age:'26'}]"></div>
<div>
<!-- 排序的項目 -->
 predicate = {{predicate}}; reverse = {{reverse}}<br>
 <table>
  <tr>
   <th><a href="" ng-click="predicate='name';reverse=!reverse">name</a></th>
   <th><a href="" ng-click="predicate='age';reverse=!reverse">age</a></th>
  </tr>
  <tr ng-repeat="friend in afriends | orderBy:predicate:reverse">
   <td>{{friend.name}}</td>
   <td>{{friend.age}}</td>
  </tr>
 </table>
</div>

範例：
---------- orderBy Sample ----------

{{ orderBy_array | orderBy:predicate:reverse }}


predicate = {{predicate}}; reverse = {{reverse}}

name age
{{friend.name}} {{friend.age}}


張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)