angularjs過濾器那些事

2021-09-25 09:58:18 字數 1241 閱讀 5091

一:內建過濾器

1. currency (貨幣處理)

使用currency可以將數字格式化為貨幣,預設是美元符號,你可以自己傳入所需的符號,此處以人民幣為例:¥}}

2:data(日期格式化)

原生的js對日期的格式化能力有限,ng提供的date過濾器基本可以滿足一般的格式化要求。用法如下:}}

3: filter(匹配子串)

這個名叫filter的filter(不得不說這名字起的,真讓人容易混淆——!)用來處理乙個陣列,然後可以過濾出含有某個子串 的元素,作為乙個子陣列來返回。可以是字串陣列,也可以是物件陣列。如果是物件陣列,可以匹配屬性的值。它接收乙個引數,用來定義子串的匹配規則。此處匹配的是陣列裡面age:21}

4:limitto(限制陣列長度或字串長度)

limitto過濾器用來擷取陣列或字串,接收乙個引數用來指定擷取的長度,如果引數是負值,則從陣列尾部開始擷取。個人覺得這個filter有點雞肋,首先只能從陣列或字串的開頭/尾部進行擷取,其次,js原生的函式就可以代替它了,看看怎麼用吧:

} //將會顯示陣列中的前兩項}

5:number(格式化數字)

number過濾器可以為乙個數字加上千位分割,像這樣,123,456,789。同時接收乙個引數,可以指定float型別保留幾位小數:}}

6:json(格式化json物件)

json過濾器可以把乙個js物件格式化為json字串,沒有引數。這東西有什麼用呢,我一般也不會在頁面上輸出乙個json串啊,官網說它 可以用來進行除錯,也可以用在js中使用,作用就和我們熟悉的json.stringify()一樣。用法超級簡單:

}7:lowercase(小寫)

把資料轉化為全部小寫。沒有引數,只能把整個字串變為小寫,不能指定字母。

8:uppercase(大寫)

9:orderby(排序)

orderby過濾器可以將乙個陣列中的元素進行排序,接收乙個引數來指定排序規則,引數可以是乙個字串,表示以該屬性名稱進行排序。可以是 乙個函式,定義排序屬性。還可以是乙個陣列,表示依次按陣列中的屬性值進行排序(若按第一項比較的值相等,再按第二項比較),還是拿上面的孩子陣列舉例:

} //按age屬性值進行排序,若是-age,則倒序

} //按照函式的返回值進行排序

} //如果age相同,按照name進行排序

二:自定義過濾器

AngularJs的過濾器

所謂過濾器就是過濾得到自己想要的資料 currency 格式化數字為貨幣格式。filter 從陣列項中選擇乙個子集。lowercase 格式化字串為小寫。orderby 根據某個表示式排列陣列。uppercase 格式化字串為大寫。uppercase 過濾器將字串格式化為大寫 divng contr...

AngularJs 七 過濾器(filter)

過濾器 filter 正如其名,作用就是接收乙個輸入,通過某個規則進行處理,然後返回處理後的結果。主要用在資料的格式化上,例如獲取乙個陣列中的子集,對陣列中的元素進行排序等。ng內建了一些過濾器,它們是 currency 貨幣 date 日期 filter 子串匹配 json 格式化json物件 l...

angularjs過濾器的學習

1.ng內建了一些過濾器,它們是 currency 貨幣 date 日期 filter 子串匹配 匹配屬性值中含有a的 匹配屬性值中含有4的 引數是物件,匹配name屬性中含有i的 引數是函式,指定返回age 4的 json 格式化json物件 json過濾器可以把乙個js物件格式化為json字串,...