AngularJS中的過濾器是用于對資料的格式化，或者篩選的函數，可以直接通過以下文法使用：
{{expression|filter}}
{{expression|filter1|filter2}}
{{expression|filter1:param1,param2,...|filter2}
過濾器的種類有number，currency，date，json，limitTo，lowercase，uppercase，filter，orderBy。
<code><!DOCTYPE html></code>
<code><</code><code>html</code> <code>ng-app</code><code>=</code><code>"app"</code><code>></code>
<code><</code><code>head</code><code>></code>
<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code> <code>ng-app</code><code>=</code><code>"app"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-controller</code><code>=</code><code>"Controller1"</code><code>></code>
<code> </code><code><</code><code>p</code><code>>{{1234567890 | number}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示1,234,567,890--></code>
<code> </code><code><</code><code>p</code><code>>{{1234.56789 | number:3}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示1,234.568，保留3位小數--></code>
<code> </code><code><</code><code>p</code><code>>{{1234.56789 | currency}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示$1,234.57，貨币，預設的字首是美元符号--></code>
<code> </code><code><</code><code>p</code><code>>{{1234.56789 | currency:'￥'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示￥1,234.57--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'medium'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示Jun 28, 2015 3:45:54 PM--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'short'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示6/28/15 3:45 PM--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'fullDate'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示Sunday, June 28, 2015--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'longDate'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示June 28, 2015--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'shortDate'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示6/28/15--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'shortTime'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示3:45 PM--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'mediumTime'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示3:45:54 PM--></code>
<code> </code><code><</code><code>p</code><code>>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示2015-06-28 15:45:54--></code>
<code> </code><code><</code><code>p</code><code>>{{['a','b','c','d','e'] | limitTo:3}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示["a","b","c"]，截取前3位--></code>
<code> </code><code><</code><code>p</code><code>>{{['a','b','c','d','e'] | limitTo:-3}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示["c","d","e"]，截取後3位--></code>
<code> </code><code><</code><code>p</code><code>>{{'Hello World' | lowercase}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示hello world--></code>
<code> </code><code><</code><code>p</code><code>>{{'Hello World' | uppercase}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示HELLO WORLD--></code>
<code> </code><code><</code><code>p</code><code>>{{data.phone | filter:'le'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示[{"name":"iPhone","company":"Apple"}]，隻比對value值--></code>
<code> </code><code><</code><code>p</code><code>>{{data.phone | filter:{company:'A'} }}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示[{"name":"iPhone","company":"Apple"},{"name":"HUAWEI P8","company":"HUAWEI"}]，company中有A就會比對到--></code>
<code> </code><code><</code><code>p</code><code>>{{data.phone | orderBy:'name'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示[{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"},{"name":"iPhone","company":"Apple"}]，以name的值做排序，預設是從小到大排序--></code>
<code> </code><code><</code><code>p</code><code>>{{data.phone | orderBy:-'name'}}</</code><code>p</code><code>></code>
<code> </code><code><!--顯示[{"name":"iPhone","company":"Apple"},{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"}]，反序--></code>
<code> </code><code><</code><code>p</code><code>>{{[2,24,13,89,3,8,41,9,10] | filter:checkNum}}</</code><code>p</code><code>></code>
<code> </code><code><!--自定義的過濾器，顯示[2,3,8,9,10]，定義見90~95行--></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"../JS/angular.min.js"</code><code>></</code><code>script</code><code>></code>
<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>
<code> </code><code>angular.module('app', [])</code>
<code> </code><code>.controller('Controller1', function($scope, $filter) {</code>
<code> </code><code>$scope.today = new Date;</code>
<code> </code><code>$scope.data = {</code>
<code> </code><code>phone: [{</code>
<code> </code><code>name: 'iPhone',</code>
<code> </code><code>company: 'Apple'</code>
<code> </code><code>}, {</code>
<code> </code><code>name: 'Galaxy S5',</code>
<code> </code><code>company: 'Sumsung'</code>
<code> </code><code>name: 'HUAWEI P8',</code>
<code> </code><code>company: 'HUAWEI'</code>
<code> </code><code>}]</code>
<code> </code><code>};</code>
<code> </code><code>var jsonString = $filter('json')($scope.data);</code>
<code> </code><code>console.log(jsonString);</code>
<code> </code><code>/* console輸出json格式的data</code>
<code> </code><code>{</code>
<code> </code><code>"phone": [</code>
<code> </code><code>{</code>
<code> </code><code>"name": "iPhone",</code>
<code> </code><code>"company": "Apple"</code>
<code> </code><code>},</code>
<code> </code><code>"name": "Galaxy S5",</code>
<code> </code><code>"company": "Sumsung"</code>
<code> </code><code>"name": "HUAWEI P8",</code>
<code> </code><code>"company": "HUAWEI"</code>
<code> </code><code>}</code>
<code> </code><code>]</code>
<code> </code><code>}</code>
<code> </code><code>*/</code>
<code> </code><code>//自定義過濾器</code>
<code> </code><code>$scope.checkNum = function(num) {</code>
<code> </code><code>//>10的不保留</code>
<code> </code><code>if (num > 10) return false;</code>
<code> </code><code>else return true;</code>
<code> </code><code>});</code>
<code> </code><code></</code><code>script</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
除了上面自定義過濾器的方法外，還有兩種專門的方法。
第一種 module.filter(name,filterFactory)
第二種 @$filterProvider.register();
第一種的例子
<code> </code><code><</code><code>ul</code><code>></code>
<code> </code><code><!-- 循環輸出data裡面的資料，用自定義的名為filterAge的過濾器過濾 --></code>
<code> </code><code><</code><code>li</code> <code>ng-repeat</code><code>=</code><code>"item in data | filterAge"</code><code>></code>
<code> </code><code>`item`.`name` `item`.`age` `item`.`position`</code>
<code> </code><code></</code><code>li</code><code>></code>
<code> </code><code></</code><code>ul</code><code>></code>
<code> </code><code>angular.module('app', [], function($provide) {</code>
<code> </code><code>//service提供資料</code>
<code> </code><code>$provide.service('data', function() {</code>
<code> </code><code>return [{</code>
<code> </code><code>name: 'Wilshere',</code>
<code> </code><code>age: 23,</code>
<code> </code><code>position: 'midfield'</code>
<code> </code><code>name: 'Giroud',</code>
<code> </code><code>age: 28,</code>
<code> </code><code>position: 'striker'</code>
<code> </code><code>name: 'Cech',</code>
<code> </code><code>age: 33,</code>
<code> </code><code>position: 'goalkeeper'</code>
<code> </code><code>}];</code>
<code> </code><code>});</code>
<code> </code><code>})</code>
<code> </code><code>//用.filter的方法定義過濾器</code>
<code> </code><code>.filter('filterAge', function() {</code>
<code> </code><code>return function(obj) {</code>
<code> </code><code>//obj是過濾前的對象</code>
<code> </code><code>var newObj = [];</code>
<code> </code><code>angular.forEach(obj, function(i) {</code>
<code> </code><code>if (i.age > 25) {</code>
<code> </code><code>newObj.push(i);</code>
<code> </code><code>}</code>
<code> </code><code>});</code>
<code> </code><code>return newObj;</code>
<code> </code><code>.controller('Controller1', function($scope, data) {</code>
<code> </code><code>$scope.data = data;</code>
第二種的例子
<code> </code><code>angular.module('app', [], function($filterProvider, $provide) {</code>
<code> </code><code>//用注冊的方法自定義過濾器</code>
<code> </code><code>$filterProvider.register('filterAge', function() {</code>
<code> </code><code>return function(obj) {</code>
<code> </code><code>var newObj = [];</code>
<code> </code><code>angular.forEach(obj, function(i) {</code>
<code> </code><code>//age大于25的才會輸出</code>
<code> </code><code>if (i.age > 25) {</code>
<code> </code><code>newObj.push(i);</code>
<code> </code><code>}</code>
<code> </code><code>});</code>
<code> </code><code>return newObj;</code>
<code> </code><code>}</code>
<a href="http://s3.51cto.com/wyfs02/M02/6F/17/wKioL1WR-IaTKPPkAABBMJ900h0063.jpg" target="_blank"></a>
本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1668754，如需轉載請自行聯系原作者
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)