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