當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angular过滤器

發布時間：2025/3/15 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 Angular过滤器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Angular過濾器

　　在HTML中的模板綁定符號{{ }}內通過|符號來調用過濾器。例如，假設我們希望將字符串
轉換成大寫，可以對字符串中的每個字符都單獨進行轉換操作，也可以使用過濾器：

{{ name | uppercase }}　　//大寫

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

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

以HTML的形式使用過濾器時，如果需要傳遞參數給過濾器，只要在過濾器名字后面加冒號
即可。如果有多個參數，可以在每個參數后面都加入冒號。例如，數值過濾器可以限制小數點后
的位數，在過濾器后寫上:2可以將2作為參數傳給過濾器：

　　可以用 | 符號作為分割符來同時使用多個過濾器。

AngularJS提供的內置過濾器。

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

{{ 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:'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過濾器可以從給定數組中選擇一個子集，并將其生成一個新數組返回。這個過濾器通

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

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

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

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

{{ [{ 'name': 'Ari', 'City': 'San Francisco', 'favorite food': 'Pizza' },{ 'name': 'Nate', 'City': 'San Francisco', 'favorite food': 'indian food' }] | filter:{'favorite food': 'Pizza'} }}

也可以用自定義函數進行過濾（在這個例子中函數定義在$scope上）：

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}

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

? false
進行區分大小寫的子字符串比較。
? 函數
運行這個函數，如果返回真值就接受這個元素。
4. json
json過濾器可以將一個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

{{ 123456789 | number }} {{ 1.234567 | number:2 }}

lowercase過濾器將字符串轉為小寫。

{{ "San Francisco is very cloudy" | lowercase }}

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

8. orderBy
orderBy過濾器可以用表達式對指定的數組進行排序。
orderBy可以接受兩個參數，第一個是必需的，第二個是可選的。
第一個參數是用來確定數組排序方向的謂詞。
下面分情況討論第一個參數的類型。
? 函數
當第一個參數是函數時，該函數會被當作待排序對象的getter方法。
? 字符串
對這個字符串進行解析的結果將決定數組元素的排序方向。我們可以傳入+或-來強制進行升
序或降序排列。
? 數組
在排序表達式中使用數組元素作為謂詞。對于與表達式結果并不嚴格相等的每個元素，則使
用第一個謂詞。
第二個參數用來控制排序的方向（是否逆向）。
例如，我們將下面的對象數組用name字段進行排序：

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

也可以對排序結果進行反轉。例如，通過將第二個參數設置為true可以將排序結果進行反轉：

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

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

{{ "San Francisco is very cloudy" | uppercase }}

自定義過濾器

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

首先，創建一個模塊用以在應用中進行引用:

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

過濾器本質上是一個會把我們輸入的內容當作參數傳入進去的函數。上面這個例子中，我們
在調用過濾器時簡單地把input當作字符串來處理。可以在這個函數中做一些錯誤檢查：

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

現在，如果想將一個句子的首字母轉換成大寫形式，可以用過濾器先將整個句子都轉換成小
寫，再把首字母轉換成大寫：

{{ 'ginger loves dog treats' | lowercase | capitalize }}

?表單驗證

如果想要屏蔽瀏覽器對表單的默認驗證行為，可以在表單元素上添加novalidate標記。

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

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

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

3. 最大長度
驗證表單輸入的文本長度是否小于或等于某個最大值，在輸入字段上使用AngularJS指令

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

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

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

6. 數字
驗證輸入內容是否是數字，將input的類型設置為number：

7. URL
驗證輸入內容是否是URL，將input的類型設置為 url：

8. 自定義驗證

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

9. 在表單中控制變量

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

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

如果驗證失敗，這個屬性的值為true；如果值為false，說明輸入字段的值通過了驗證。10. 一些有用的CSS樣式AngularJS處理表單時，會根據表單當前的狀態添加一些CSS類（例如當前是合法的、未發變化的，等等），這些CSS類的命名和前面介紹的屬性很相似。

它們包括：
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
它們對應著表單輸入字段的特定狀態。
當某個字段中的輸入非法時，.ng-invlid類會被添加到這個字段上。當前例子中的站點將
對應的CSS樣式設置為：

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

? $parsers
當用戶同控制器進行交互，并且ngModelController中的$setViewValue()方法被調用時，
$parsers數組中的函數會以流水線的形式被逐個調用。第一個$parse被調用后，執行結果會傳
遞給第二個$parse，以此類推。
這些函數可以對輸入值進行轉換，或者通過$setValidity()函數設置表單的合法性。
使用$parsers數組是實現自定義驗證的途徑之一。例如，假設我們想要確保輸入值在某兩個
數值之間，可以在$parsers數組中入棧一個新的函數，這個函數會在驗證鏈中被調用。
每個$parser返回的值都會被傳入下一個$parser中。當不希望數據模型發生更新時返回
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
當綁定的ngModel值發生了變化，并經過$parsers數組中解析器的處理后，這個值會被傳遞
給$formatters流水線。同$parsers數組可以修改表單的合法性狀態類似，$formatters中的函
數也可以修改并格式化這些值。
比起單純的驗證目的，這些函數更常用來處理視圖中的可視變化。例如，假設我們要對某個
值進行格式化。通過$formatters數組可以在這個值上執行過濾器：

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); }); } }; });

轉載于:https://www.cnblogs.com/lymblog/p/7264256.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：软件工程概论---典型用户和用户场景描述
下一篇： WPF强制更新