AngularJS中Filter的用法


背景介紹

Filter簡介

Filter是用來格式化數據用的。

Filter的基本原型( ‘|’ 類似于Linux中的管道模式):

{{ expression |filter}}

Filter可以被鏈式使用(即連續使用多個filter):

{{ expression| filter1 |filter2| ... }}

Filter也可以指定多個參數:

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


AngularJS內建的Filter

AngularJS內建了一些常用的Filter:

currencyFilter(currency):

用途:格式化貨幣

方法原型:

function(amount, currencySymbol, fractionSize)

用法:

{{ 12 | currency}} ? ?將12格式化為貨幣,默認單位符號為 $, 小數默認2位

{{ 12.45 | currency:'¥'}} ? ?將12.45格式化為貨幣,使用自定義單位符號為 '¥', 小數默認2位

{{ 12.45 | currency:'CHY¥':1}} ? ?將12.45格式化為貨幣,使用自定義單位符號為 'CHY¥', 小數指定1位, 會執行四舍五入操作

{{ 12.55 | currency:undefined:0}} ? ?將12.55格式化為貨幣, 不改變單位符號, 小數部分將四舍五入


dateFilter(date):

用途:格式化日期

方法原型:

function(date, format, timezone)

用法:

使用ISO標準日期格式

{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}

使用13位(單位:毫秒)時間戳

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}

指定timezone為UTC

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}


filterFilter(filter):

用途:過濾數組

方法原型:

function(array, expression, comparator)

用法1(參數expression使用String):


用法2(參數expression使用function):


用法3(參數expression使用object):


用法4(指定comparator為true或false):


用法5(指定comparator為function):


jsonFilter(json):

方法原型:

function(object, spacing)

用法(將對象格式化成標準的JSON格式):

{{ {name:'Jack', age:21} | json}}

limitToFilter(limitTo):

方法原型:

function(input, limit)

用法(選取前N個記錄):


lowercaseFilter(lowercase)/uppercaseFilter(uppercase):

方法原型:

function(string)

用法:

China has joined the {{ ?"wto" ?| ?uppercase ?}}. We all need {{"MONEY"| lowercase }}.

numberFilter(number):

方法原型:

function(number, fractionSize)

用法:

{{"3456789"| number}}

<br/>

{{true|number}}

<br/>

{{12345678| number:1}}


orderByFilter(orderBy):

方法原型:

function(array, sortPredicate, reverseOrder)

用法:



自定義Filter

和Directive一樣,如果內建的Filter不能滿足你的需求,你當然可以定義一個專屬于你自己的Filter。我們來做一個自己的Filter:capitalize_as_you_want,該Filter會使你輸入的字符串中的首字母、指定index位置字母以及指定的字母全部大寫。

方法原型:

function(input, capitalize_index, specified_char)

完整的示例:

demo點擊


PPT點擊

視頻點擊


參考資料

AngularJS官方文檔:https://docs.angularjs.org/guide/filter

CodeSchool快速入門視頻:http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

Fun with AngularJS filter:http://sarahbranon.com/post/69604997957/fun-with-angularjs-filters-part-1-the-filter

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容