[Angularjs]过滤器
寫在前面
在實際項目中，經常會遇到這樣的事情，返回的數據的格式，并不是我們希望的樣子，這時候，你就需要對數據進行格式化了，還好，angularjs提供這樣的過濾器，更方便我們的操作。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-show和ng-hide
[Angularjs]視圖和路由（一）
[Angularjs]視圖和路由（二）
[Angularjs]視圖和路由（三）
[Angularjs]視圖和路由（四）
[Angularjs]ng-class,ng-class-even,ng-class-odd
[Angularjs]單頁應用之分頁
[Angularjs]國際化
[Angularjs]ng-repeat中使用ng-model遇到的問題
一個例子
過濾器用來格式化需要展示給用戶的數據。AngularJS有很多實用的內置過濾器，同時也提供了方便的途徑可以自己創建過濾器。
在HTML中的模板綁定符號{{ }}內通過|符號來調用過濾器。當然也可以對同一個數據使用多個過濾器。
currency
currecy過濾器可以將一個數值格式化為貨幣格式。
currecy過濾器允許我們自己設置貨幣符號。默認情況下會采用客戶端所處區域的貨幣符號， 但是也可以自定義貨幣符號。?
<!DOCTYPE html> <html ng-app="app"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>過濾器</title><meta charset="utf-8" /><script src="JS/angular.min.js"></script><script>var app = angular.module('app', []);app.controller('FilterController', function ($scope) {});</script> </head> <body><div ng-controller="FilterController"><ul><li><!-- currecy過濾器可以將一個數值格式化為貨幣格式 -->currency:{{1023|currency}}</li></ul></div> </body> </html>?
date
date過濾器可以將日期格式化成需要的格式。AngularJS中內置了幾種日期格式，如果沒有 指定使用任何格式，默認會采用mediumDate格式。
<script>var app = angular.module('app', []);app.controller('FilterController', function ($scope) {$scope.today = new Date();});</script> <li>{{today}}<br />{{today|date:'medium' }}<br />{{today|date:'short'}}<br />{{today|date:'fullDate'}}<br />{{today|date:'longDate'}}<br />{{today|date:'mediumDate'}}<br />{{today|date:'shortDate'}}<br />{{today|date:'mediumTime'}}<br />{{today|date:'shortTime'}}<br /></li> <strong>年份格式化</strong><br />四位年份:{{today|date:'yyyy'}}<br />兩位年份:{{today|date:'yy'}}<br />一位年份:{{today|date:'y'}}<br /><strong>月份格式化</strong> <br />英文月份:{{today|date:'MMMM'}}<br />英文月份簡寫:{{today|date:'MMM'}}<br />數字月份:{{today|date:'MM'}}<br />一年中的第幾個月份:{{today|date:'M'}}<br /><strong>日期格式化</strong> <br />數字日期:{{today|date:'dd'}}<br />一個月中的第幾天:{{today|date:'d'}}<br />英文星期:{{today|date:'EEEE'}}<br />英文星期簡寫: {{today|date:'EEE'}}<br /><strong>小時格式化</strong> <br />24小時制數字小時:{{today|date:'HH'}}<br />一天中的第幾個小時:{{today|date:'H'}}<br />12小時制數字小時: {{today|date:'hh'}}<br />上午或下午的第幾個小時:{{today|date:'h'}}<br /><strong>分鐘格式化</strong> <br />數字分鐘數:{{today|date:'mm'}}<br />一個小時中的第幾分鐘:{{today|date:'m'}}<br /><strong>秒數格式化</strong> <br />數字秒數:{{today|date:'ss'}}<br />一分鐘內的第幾秒:{{today|date:'s'}}<br />毫秒數: {{today|date:'sss'}}<br /><strong>字符格式化</strong> <br />上下午標識:{{today|date:'a'}}<br />四位時區標識:{{today|date:'Z'}}<br />?
如果顯示2015-08-23格式的日期，可以這樣寫日期格式化格式：?
{{today|date:'yyyy-MM-dd'}}filter
filter過濾器可以從給定的數據源中選擇一個子集，并將其生成一個新的數據源返回。這個過濾器通常用來過濾需要進行展示的元素。比如，在搜索中，可以從一個數組中立刻過濾出所需的結果。這個過濾器的第一個參數可以是字符串，對象或一個用來從數組中選擇的函數。
filter過濾器第一個參數：
- 字符串：返回所有包含這個字符串的元素。如果我們想返回不包含這個字符串的元素，在參數前加!符號。
- 對象：Angularjs會將待過濾對象的屬性同這個對象中的同名屬性進行比較，如果屬性值是字符串就會判斷是否包含該字符串。如果我們希望對全部屬性進行對比，可以將$當作鍵名。
- 函數
對每個元素都執行這個函數，返回非假值得元素會出啊先在新的數組中并返回。
<li><!-- 只輸出包含a的字符串 -->{{['addf','wolfy','ss','adf']|filter:'a'}}<!-- 只輸出不包含a的字符串 -->{{['addf','wolfy','ss','adf']|filter:'!a'}}</li>?
<!-- 對象 -->{{ [{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|filter:{'$':'wolfy'} }}?
也可以自定義一個函數進行過濾，比如輸出年齡大于21的對象。
{{[{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|filter:ageThan21 }} $scope.ageThan21 = function (p) {console.log(p);if (p.age > 21) {return p;};};第二個參數：
true:使用angular.equals(expected,actual)對兩個值進行嚴格比較。
false:進行區別大小寫的字符串比較。
函數：運行這個函數，如果返回真值就接受這個元素。
json
json過濾器可以將一個json或javascript對象轉換成字符串。
<!-- json過濾器 -->{{ {'id':1,'name':'wolfy','age':21}|json }}?
limitTo
limitTo過濾器會根據傳入的參數生成一個新的數組或字符串，新的數組或字符串的長度取決于傳入的參數，通過傳入參數的正負值來控制從前面還是從后面開始截取。
注意
如果傳入的長度值大于被操作的數組或字符串的長度，那么整個字符串或數組都會被返回。
<!-- limitTo過濾器 -->{{"Hello World"|limitTo:5}}{{"Hello World"|limitTo:-5}}?
對于數組，使用limitTo過濾器，下標是從1開始的，比如：
{{ ['a','b','c','d','e','f'] | limitTo:1 }}?
lowercase
lowercase過濾器將字符串轉換為小寫。
<!-- lowercase過濾器 -->{{'HELLO WORLD'|lowercase}}<!-- hello world -->uppercase?
uppercase 過濾器可以將字符串轉換為大寫。
number
number過濾器將數字格式化為文本，第二個參數是可選的，用來控制小數點后截取的位數。
注意
如果傳入一個非數字字符，會返回空字符串。
<!-- number過濾器 -->{{ 123456789 | number }}{{3.14121214|number:2}}?
?orderBy
orderBy過濾器可以用表達式對指定的數組進行排序。
orderBy可以接受兩個參數，第一個是必需的，第二個可選。
第一個參數是用來確定數組排序方向的謂詞。
第一個參數可以為函數，字符串，數組。
- 函數：該函數作為排序對象的getter方法。
- 字符串：對這字符串進行解析的結果將決定數組元素的排序方向。可以傳入+或者-來進行強制升序或者降序。
- 數組：在排序表達式中使用數組元素作為謂詞。對于與表達式結果并不嚴格相等的每個元素，則使用第一個謂詞。
第二個參數用來控制排序的方向（是否逆向）
?按name進行排序：
<li><!-- oderBy過濾器 -->{{[{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|orderBy:'name' }}</li>?
可以通過第二個參數對結果進行反轉，
<li><!-- oderBy過濾器 -->{{[{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|orderBy:'name'：true }}</li>?
以上就是angularjs內置的過濾器，但有時上面的過濾器并不能滿足我們的需求，能不能自己定義過濾器呢？答案是肯定的，并且實現起來非常簡單。
自定義過濾器
自定義的過濾器有點類似上面的filter過濾器，下面舉一個例子，對比一下。
我們現在實現一個自定義過濾器，將一個句子的首字母轉換為大寫。
app.filter('changeFirstUpper', function () {return function (input) {console.log('changeFirstUpper');console.log(input);var newArr = [];if (input) {var arr = input.split(' ');for (var i = 0; i < arr.length; i++) {arr[i] = arr[i][0].toUpperCase() + arr[i].slice(1);newArr.push(arr[i]);};return newArr.join(' ');};};}); <!-- 自定義過濾器 --> {{'the last one the best one'|changeFirstUpper}}?
總結
?angularjs的過濾器內容到此結束，在實際項目中還是比較常用的。
參考
Angularjs權威教程
?
?
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版權： | 本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接。 如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起討論，共同進步！ 再次感謝您耐心的讀完本篇文章。http://www.cnblogs.com/wolf-sun/p/4752004.html |
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的[Angularjs]过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Sql2008的行列转换之行转列
- 下一篇： 浅谈Perl的类、包、模块与面对对象编程