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