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=)