Angular過濾器

?

　　在HTML中的模板綁定符號(hào){{ }}內(nèi)通過|符號(hào)來調(diào)用過濾器。例如，假設(shè)我們希望將字符串
轉(zhuǎn)換成大寫，可以對(duì)字符串中的每個(gè)字符都單獨(dú)進(jìn)行轉(zhuǎn)換操作，也可以使用過濾器：

{{ name | uppercase }}　　//大寫

?

在JavaScript代碼中可以通過$filter來調(diào)用過濾器。例如，在JavaScript代碼中使用lowercase
過濾器：

app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari');　　//小寫：ari }]);

?

　　以HTML的形式使用過濾器時(shí)，如果需要傳遞參數(shù)給過濾器，只要在過濾器名字后面加冒號(hào)
即可。如果有多個(gè)參數(shù)，可以在每個(gè)參數(shù)后面都加入冒號(hào)。例如，數(shù)值過濾器可以限制小數(shù)點(diǎn)后
的位數(shù)，在過濾器后寫上:2可以將2作為參數(shù)傳給過濾器：
<!-- 顯示：123.46 -->

{{ 123.456789 | number:2 }}

　　可以用 | 符號(hào)作為分割符來同時(shí)使用多個(gè)過濾器。

---

?

?

---

?

AngularJS提供的內(nèi)置過濾器。

1. currency
currecy過濾器可以將一個(gè)數(shù)值格式化為貨幣格式。用{{ 123 | currency }}來將123轉(zhuǎn)化
成貨幣格式。
currecy過濾器允許我們自己設(shè)置貨幣符號(hào)。默認(rèn)情況下會(huì)采用客戶端所處區(qū)域的貨幣符號(hào)，
但是也可以自定義貨幣符號(hào)。
2. date
date過濾器可以將日期格式化成需要的格式。AngularJS中內(nèi)置了幾種日期格式，如果沒有
指定使用任何格式，默認(rèn)會(huì)采用mediumDate格式，下面的例子中展示了這個(gè)格式。
下面是內(nèi)置的支持本地化的日期格式：

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM --> {{ today | date:'short' }} <!-- 8/9/1312:09PM --> {{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 --> {{ today | date:'longDate' }} <!-- August 09, 2013 --> {{ today | date:'mediumDate' }}<!-- Aug 09, 2013 --> {{ today | date:'shortDate' }} <!-- 8/9/13 --> {{ today | date:'mediumTime' }}<!-- 12:09:02 PM --> {{ today | date:'shortTime' }} <!-- 12:09 PM -->{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM --> {{ today | date:'short' }} <!-- 8/9/1312:09PM --> {{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 --> {{ today | date:'longDate' }} <!-- August 09, 2013 --> {{ today | date:'mediumDate' }}<!-- Aug 09, 2013 --> {{ today | date:'shortDate' }} <!-- 8/9/13 --> {{ today | date:'mediumTime' }}<!-- 12:09:02 PM --> {{ today | date:'shortTime' }} <!-- 12:09 PM -->

?

? 年份格式化
四位年份：{{ today | date:'yyyy' }} <!-- 2013 -->
兩位年份：{{ today | date:'yy' }} <!-- 13 -->
一位年份：{{ today | date:'y' }} <!-- 2013 -->

? 月份格式化
英文月份：{{ today | date:'MMMM' }} <!-- August -->
英文月份簡(jiǎn)寫：{{ today | date:'MMM' }} <!-- Aug -->
數(shù)字月份：{{ today |date:'MM' }} <!-- 08 -->
一年中的第幾個(gè)月份：{{ today |date:'M' }} <!-- 8 -->
? 日期格式化
數(shù)字日期：{{ today|date:'dd' }} <!-- 09 -->
一個(gè)月中的第幾天：{{ today | date:'d' }} <!-- 9 -->
英文星期：{{ today | date:'EEEE' }} <!-- Thursday -->
英文星期簡(jiǎn)寫：{{ today | date:'EEE' }} <!-- Thu -->

? 小時(shí)格式化
24小時(shí)制數(shù)字小時(shí)：{{today|date:'HH'}} <!--00-->
一天中的第幾個(gè)小時(shí)：{{today|date:'H'}} <!--0-->
12小時(shí)制數(shù)字小時(shí)：{{today|date:'hh'}} <!--12-->
上午或下午的第幾個(gè)小時(shí)：{{today|date:'h'}} <!--12-->
? 分鐘格式化
數(shù)字分鐘數(shù)：{{ today | date:'mm' }} <!-- 09 -->
一個(gè)小時(shí)中的第幾分鐘：{{ today | date:'m' }} <!-- 9 -->
? 秒數(shù)格式化
數(shù)字秒數(shù)：{{ today | date:'ss' }} <!-- 02 -->
一分鐘內(nèi)的第幾秒：{{ today | date:'s' }} <!-- 2 -->
毫秒數(shù)：{{ today | date:'.sss' }} <!-- .995 -->
? 字符格式化
上下午標(biāo)識(shí)：{{ today | date:'a' }} <!-- AM -->
四位時(shí)區(qū)標(biāo)識(shí)：{{ today | date:'Z' }} <!--- 0700 -->

下面是一些自定義日期格式的示例：
{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->
3. filter
filter過濾器可以從給定數(shù)組中選擇一個(gè)子集，并將其生成一個(gè)新數(shù)組返回。這個(gè)過濾器通

常用來過濾需要進(jìn)行展示的元素。例如，在做客戶端搜索時(shí)，可以從一個(gè)數(shù)組中立刻過濾出所需
的結(jié)果。
這個(gè)過濾器的第一個(gè)參數(shù)可以是字符串、對(duì)象或是一個(gè)用來從數(shù)組中選擇元素的函數(shù)。
下面分情況介紹傳入不同類型的參數(shù)。

? 字符串
返回所有包含這個(gè)字符串的元素。如果我們想返回不包含該字符串的元素，在參數(shù)前加!
符號(hào)。
? 對(duì)象
AngularJS會(huì)將待過濾對(duì)象的屬性同這個(gè)對(duì)象中的同名屬性進(jìn)行比較，如果屬性值是字符串
就會(huì)判斷是否包含該字符串。如果我們希望對(duì)全部屬性都進(jìn)行對(duì)比，可以將$當(dāng)作鍵名。
? 函數(shù)
對(duì)每個(gè)元素都執(zhí)行這個(gè)函數(shù)，返回非假值的元素會(huì)出現(xiàn)在新的數(shù)組中并返回。
例如，用下面的過濾器可以選擇所有包含字母e的單詞：

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} <!-- ["Lerner","Likes","Eat"] -->

?

如果要過濾對(duì)象，可以使用上面提到的對(duì)象過濾器。例如，如果有一個(gè)由people對(duì)象組成的
數(shù)組，每個(gè)對(duì)象都含有他們最喜歡吃的食物的列表，那么可以用下面的形式進(jìn)行過濾：

{{ [{ 'name': 'Ari', 'City': 'San Francisco', 'favorite food': 'Pizza' },{ 'name': 'Nate', 'City': 'San Francisco', 'favorite food': 'indian food' }] | filter:{'favorite food': 'Pizza'} }} <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

?

也可以用自定義函數(shù)進(jìn)行過濾（在這個(gè)例子中函數(shù)定義在$scope上）：

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }} <!-- ["Ari"] -->

?

isCapitalized函數(shù)的功能是根據(jù)首字母是否為大寫返回true或false，具體如下所示：
$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};
我們也可以給filter過濾器傳入第二個(gè)參數(shù)，用來指定預(yù)期值同實(shí)際值進(jìn)行比較的方式。
第二個(gè)參數(shù)可以是以下三種情況之一。
? true
用angular.equals(expected, actual)對(duì)兩個(gè)值進(jìn)行嚴(yán)格比較。

? false
進(jìn)行區(qū)分大小寫的子字符串比較。
? 函數(shù)
運(yùn)行這個(gè)函數(shù)，如果返回真值就接受這個(gè)元素。
4. json
json過濾器可以將一個(gè)JSON或JavaScript對(duì)象轉(zhuǎn)換成字符串。這種轉(zhuǎn)換對(duì)調(diào)試非常有幫助：

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }} <!-- { "name": "Ari", "City": "San Francisco" } -->

?

5. limitTo
limitTo過濾器會(huì)根據(jù)傳入的參數(shù)生成一個(gè)新的數(shù)組或字符串，新的數(shù)組或字符串的長(zhǎng)度取
決于傳入的參數(shù)，通過傳入?yún)?shù)的正負(fù)值來控制從前面還是從后面開始截取。
如果傳入的長(zhǎng)度值大于被操作數(shù)組或字符串的長(zhǎng)度，那么整個(gè)數(shù)組或字符串都會(huì)被
返回。
例如，我們可以截取字符串的前三個(gè)字符：

{{ San Francisco is very cloudy | limitTo:3 }} <!-- San -->

?

或最后的六個(gè)字符：

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

?

對(duì)數(shù)組也可以進(jìn)行同樣的操作。返回?cái)?shù)組的第一個(gè)元素：

{{ ['a','b','c','d','e','f'] | limitTo:1 }} <!-- ["a"] -->

?

6. lowercase

{{ 123456789 | number }} <!-- 1,234,567,890 -->{{ 1.234567 | number:2 }} <!-- 1.23 -->

?

?

lowercase過濾器將字符串轉(zhuǎn)為小寫。

{{ "San Francisco is very cloudy" | lowercase }} <!-- san francisco is very cloudy -->

?

7. number
number過濾器將數(shù)字格式化成文本。它的第二個(gè)參數(shù)是可選的，用來控制小數(shù)點(diǎn)后截取的位數(shù)。
如果傳入了一個(gè)非數(shù)字字符，會(huì)返會(huì)空字符串。

8. orderBy
orderBy過濾器可以用表達(dá)式對(duì)指定的數(shù)組進(jìn)行排序。
orderBy可以接受兩個(gè)參數(shù)，第一個(gè)是必需的，第二個(gè)是可選的。
第一個(gè)參數(shù)是用來確定數(shù)組排序方向的謂詞。
下面分情況討論第一個(gè)參數(shù)的類型。
? 函數(shù)
當(dāng)?shù)谝粋€(gè)參數(shù)是函數(shù)時(shí)，該函數(shù)會(huì)被當(dāng)作待排序?qū)ο蟮膅etter方法。
? 字符串
對(duì)這個(gè)字符串進(jìn)行解析的結(jié)果將決定數(shù)組元素的排序方向。我們可以傳入+或-來強(qiáng)制進(jìn)行升
序或降序排列。
? 數(shù)組
在排序表達(dá)式中使用數(shù)組元素作為謂詞。對(duì)于與表達(dá)式結(jié)果并不嚴(yán)格相等的每個(gè)元素，則使
用第一個(gè)謂詞。
第二個(gè)參數(shù)用來控制排序的方向（是否逆向）。
例如，我們將下面的對(duì)象數(shù)組用name字段進(jìn)行排序：

{{ [{ 'name': 'Ari', 'status': 'awake' },{ 'name': 'Q', 'status': 'sleeping' },{ 'name': 'Nate', 'status': 'awake' }] | orderBy:'name' }} <!-- [ {"name":"Ari","status":"awake"}, {"name":"Nate","status":"awake"}, {"name":"Q","status":"sleeping"} ] -->

?

也可以對(duì)排序結(jié)果進(jìn)行反轉(zhuǎn)。例如，通過將第二個(gè)參數(shù)設(shè)置為true可以將排序結(jié)果進(jìn)行反轉(zhuǎn)：

{{ [{ 'name': 'Ari', 'status': 'awake' },{ 'name': 'Q', 'status': 'sleeping' },{ 'name': 'Nate','status': 'awake' }] | orderBy:'name':true }} <!-- [ {"name":"Q","status":"sleeping"}, {"name":"Nate","status":"awake"}, {"name":"Ari","status":"awake"} ] -->

?

?

?

9. uppercase
uppercase過濾器可以將字符串轉(zhuǎn)換為大寫形式：

{{ "San Francisco is very cloudy" | uppercase }} <!-- SAN FRANCISCO IS VERY CLOUDY -->

?

---

?

---

?

自定義過濾器

創(chuàng)建自定義過濾器需要將它放到自己的模塊中。

首先，創(chuàng)建一個(gè)模塊用以在應(yīng)用中進(jìn)行引用:

angular.module('myApp.filters', []) .filter('capitalize', function() { return function(input) {}; });

?

過濾器本質(zhì)上是一個(gè)會(huì)把我們輸入的內(nèi)容當(dāng)作參數(shù)傳入進(jìn)去的函數(shù)。上面這個(gè)例子中，我們
在調(diào)用過濾器時(shí)簡(jiǎn)單地把input當(dāng)作字符串來處理。可以在這個(gè)函數(shù)中做一些錯(cuò)誤檢查：

angular.module('myApp.filters', []) .filter('capitalize', function() { return function(input) { // input是我們傳入的字符串 if (input) { return input[0].toUpperCase() + input.slice(1);　　//把第一個(gè)字母轉(zhuǎn)換成大寫 } });

?

現(xiàn)在，如果想將一個(gè)句子的首字母轉(zhuǎn)換成大寫形式，可以用過濾器先將整個(gè)句子都轉(zhuǎn)換成小
寫，再把首字母轉(zhuǎn)換成大寫：

<!-- Ginger loves dog treats --> {{ 'ginger loves dog treats' | lowercase | capitalize }}

?

---

?

---

?表單驗(yàn)證

如果想要屏蔽瀏覽器對(duì)表單的默認(rèn)驗(yàn)證行為，可以在表單元素上添加novalidate標(biāo)記。

下面看一下可以在input元素上使用的所有驗(yàn)證選項(xiàng)。
1. 必填項(xiàng)
驗(yàn)證某個(gè)表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標(biāo)記required即可：

<input type="text" required />

?

2. 最小長(zhǎng)度
驗(yàn)證表單輸入的文本長(zhǎng)度是否大于某個(gè)最小值，在輸入字段上使用AngularJS指令ng-minleng=

"{number}"： <input type="text" ng-minlength="5" />

?

3. 最大長(zhǎng)度
驗(yàn)證表單輸入的文本長(zhǎng)度是否小于或等于某個(gè)最大值，在輸入字段上使用AngularJS指令

ng-maxlength="{number}"： <input type="text" ng-maxlength="20" />

?

4. 模式匹配
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表達(dá)式：

<input type="text" ng-pattern="[a-zA-Z]" />

?

5. 電子郵件
驗(yàn)證輸入內(nèi)容是否是電子郵件，只要像下面這樣將input的類型設(shè)置為email即可：

<input type="email" name="email" ng-model="user.email" />

?

6. 數(shù)字
驗(yàn)證輸入內(nèi)容是否是數(shù)字，將input的類型設(shè)置為number：

<input type="number" name="age" ng-model="user.age" />

?

7. URL
驗(yàn)證輸入內(nèi)容是否是URL，將input的類型設(shè)置為 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

?

8. 自定義驗(yàn)證

自定義變量在往后的博文中作詳細(xì)介紹。

9. 在表單中控制變量

（注意，可以使用下面的格式訪問這些屬性。）
formName.inputFieldName.property

? 未修改的表單
這是一個(gè)布爾屬性，用來判斷用戶是否修改了表單。如果未修改，值為true，如果修改過值
為false：
formName.inputFieldName.$pristine
? 修改過的表單
只要用戶修改過表單，無論輸入是否通過驗(yàn)證，該值都返回true：
formName.inputFieldName.$dirty
? 合法的表單
這個(gè)布爾型的屬性用來判斷表單的內(nèi)容是否合法。如果當(dāng)前表單內(nèi)容是合法的，下面屬性的
值就是true：
formName.inputFieldName.$valid
? 不合法的表單
這個(gè)布爾屬性用來判斷表單的內(nèi)容是否不合法。如果當(dāng)前表單內(nèi)容是不合法的，下面屬性的
值為true：
formName.inputFieldName.$invalid
? 錯(cuò)誤
這是AngularJS提供的另外一個(gè)非常有用的屬性：$error對(duì)象。它包含當(dāng)前表單的所有驗(yàn)證
內(nèi)容，以及它們是否合法的信息。用下面的語(yǔ)法訪問這個(gè)屬性：
formName.inputfieldName.$error

如果驗(yàn)證失敗，這個(gè)屬性的值為true；如果值為false，說明輸入字段的值通過了驗(yàn)證。10. 一些有用的CSS樣式AngularJS處理表單時(shí)，會(huì)根據(jù)表單當(dāng)前的狀態(tài)添加一些CSS類（例如當(dāng)前是合法的、未發(fā)變化的，等等），這些CSS類的命名和前面介紹的屬性很相似。

它們包括：
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
它們對(duì)應(yīng)著表單輸入字段的特定狀態(tài)。
當(dāng)某個(gè)字段中的輸入非法時(shí)，.ng-invlid類會(huì)被添加到這個(gè)字段上。當(dāng)前例子中的站點(diǎn)將
對(duì)應(yīng)的CSS樣式設(shè)置為：

input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; }

?

? $parsers
當(dāng)用戶同控制器進(jìn)行交互，并且ngModelController中的$setViewValue()方法被調(diào)用時(shí)，
$parsers數(shù)組中的函數(shù)會(huì)以流水線的形式被逐個(gè)調(diào)用。第一個(gè)$parse被調(diào)用后，執(zhí)行結(jié)果會(huì)傳
遞給第二個(gè)$parse，以此類推。
這些函數(shù)可以對(duì)輸入值進(jìn)行轉(zhuǎn)換，或者通過$setValidity()函數(shù)設(shè)置表單的合法性。
使用$parsers數(shù)組是實(shí)現(xiàn)自定義驗(yàn)證的途徑之一。例如，假設(shè)我們想要確保輸入值在某兩個(gè)
數(shù)值之間，可以在$parsers數(shù)組中入棧一個(gè)新的函數(shù)，這個(gè)函數(shù)會(huì)在驗(yàn)證鏈中被調(diào)用。
每個(gè)$parser返回的值都會(huì)被傳入下一個(gè)$parser中。當(dāng)不希望數(shù)據(jù)模型發(fā)生更新時(shí)返回
undefined。

angular.module('myApp') .directive('oneToTen', function() { return { require: '?ngModel', link: function(scope, ele, attrs, ngModel) { if (!ngModel) return; ngModel.$parsers.unshift( function(viewValue) { var i = parseInt(viewValue); if (i >= 0 && i < 10) { ngModel.$setValidity('oneToTen', true); return viewValue; } else { ngModel.$setValidity('oneToTen', false); return undefined; }}); } }; });

?

? $formatters
當(dāng)綁定的ngModel值發(fā)生了變化，并經(jīng)過$parsers數(shù)組中解析器的處理后，這個(gè)值會(huì)被傳遞
給$formatters流水線。同$parsers數(shù)組可以修改表單的合法性狀態(tài)類似，$formatters中的函
數(shù)也可以修改并格式化這些值。
比起單純的驗(yàn)證目的，這些函數(shù)更常用來處理視圖中的可視變化。例如，假設(shè)我們要對(duì)某個(gè)
值進(jìn)行格式化。通過$formatters數(shù)組可以在這個(gè)值上執(zhí)行過濾器：

angular.module('myApp') .directive('oneToTen', function() { return { require: '?ngModel', link: function(scope, ele, attrs, ngModel) { if (!ngModel) return; ngModel.$formatters.unshift(function(v) { return $filter('number')(v); }); } }; });

?

轉(zhuǎn)載于:https://www.cnblogs.com/lymblog/p/7264256.html

總結(jié)

以上是生活随笔為你收集整理的Angular过滤器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。