angularJS过滤器
过滤器（filter）正如其名，作用就是，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。
ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。
过滤器的使用：过滤器可以使用一个管道字符（|）添加到和中。
具体使用：
currency（格式化货币单位）
格式：| currency：[-货币单位（可以自定义，默认是$）] ：[-小数指定位数（自动四舍五入）,默认是2位小数] 注：本章凡是有[-] ，代表是可选参数
Document
{{ 12 + 12 + 0.01 | currency}} $12.00
{{ 12.45 | currency:'￥'}}
{{ 12.45 | currency:'CHY￥':3}}
{{ 12.55 | currency:undefined:2}}
效果如下：
date（格式化日期）
格式： | date: MM *dd* yyyy * h* mma 注：y M d h m s E 分别表示 年 月 日 时 分 秒 星期
*号表示随意插入符号（如：- / : 年，月，日 等 ）你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。我们完全可以根据自己的意愿组合出想要的格式
{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy h:mma"}}
{{ 1432075948123 | date:"MM/dd/yyyy h:mma"}}
{{ 1432075948123 | date:"MM/dd/yyyy h:mma":"UTC"}}
{{'04/07/2017' | date: 'yyyy年MM月dd日'}}
效果如下：
filter（匹配子串）
这个名叫filter的filter（不得不说这名字起的，真让人容易混淆—_—！）用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。格式： | filter ： fn/string/obj 接收一个参数，用来定义子串的匹配规则。个人感觉有点像模糊匹配的意思。
Document
//匹配属性值含有“m”的
{{ arr | filter : 'm' }} //匹配属性值含有20的
{{ arr | filter : 20 }} //参数是对象，匹配name属性中含有 ‘a’的
{{ arr | filter : {name: "a"} }} //参数是函数，指定返回符合条件的项
{{ arr | filter : fn }}
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>
<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> myApp </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> angular.module(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">myApp</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,[]);
myApp.controller(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">myContrl</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,[</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">$scope</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">($scope){
$scope.arr</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">[
{name:</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">tom</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,age: </span><span style="background-color: #f5f5f5; color: #000000">18</span><span style="background-color: #f5f5f5; color: #000000">},{name:</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">sam</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,age: </span><span style="background-color: #f5f5f5; color: #000000">19</span><span style="background-color: #f5f5f5; color: #000000">},{name:</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">jack</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,age: </span><span style="background-color: #f5f5f5; color: #000000">20</span><span style="background-color: #f5f5f5; color: #000000">},{name:</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">hellen</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,age: </span><span style="background-color: #f5f5f5; color: #000000">21</span><span style="background-color: #f5f5f5; color: #000000">}
];
$scope.fn</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(e){
</span><span style="background-color: #f5f5f5; color: #0000ff">return</span><span style="background-color: #f5f5f5; color: #000000"> e.age</span><span style="background-color: #f5f5f5; color: #000000"><</span> <span style="background-color: #f5f5f5; color: #000000">21</span><span style="background-color: #f5f5f5; color: #000000">;
}
}])
</span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"></
<span style="color: #800000">body<span style="color: #0000ff">><span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>
效果如下：
json（格式化json对象）
格式： | json 无参数 json过滤器可以把一个js对象格式化为json字符串 作用就和我们熟悉的JSON.stringify()一样。用法超级简单：
Document {{ oJson | json }}<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span> <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> myApp </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> angular.module(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">myApp</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">($scope){ $scope.oJson</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">[ { </span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">name</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">: </span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">jjk</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">age</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">: </span><span style="background-color: #f5f5f5; color: #000000">18</span><span style="background-color: #f5f5f5; color: #000000"> },{ </span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">name</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">: </span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">dk</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">age</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">: </span><span style="background-color: #f5f5f5; color: #000000">19</span><span style="background-color: #f5f5f5; color: #000000"> } ]; $scope.fn</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(e){ </span><span style="background-color: #f5f5f5; color: #0000ff">return</span><span style="background-color: #f5f5f5; color: #000000"> e.age</span><span style="background-color: #f5f5f5; color: #000000"><</span> <span style="background-color: #f5f5f5; color: #000000">21</span><span style="background-color: #f5f5f5; color: #000000">; } }]) </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"></
<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>效果如下：
limitTo（限制数组长度或者字符串长度）
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度 注：只能从数组或者字符串的开头截取
Document {{ oJson | limitTo : 1 }}<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span> <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> myApp </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> angular.module(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">myApp</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">age</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">: </span><span style="background-color: #f5f5f5; color: #000000">19</span><span style="background-color: #f5f5f5; color: #000000"> } ]; $scope.fn</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(e){ </span><span style="background-color: #f5f5f5; color: #0000ff">return</span><span style="background-color: #f5f5f5; color: #000000"> e.age</span><span style="background-color: #f5f5f5; color: #000000"><</span> <span style="background-color: #f5f5f5; color: #000000">21</span><span style="background-color: #f5f5f5; color: #000000">; } }]) </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"></
<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>效果如下：
lowercase(小写)
把数据转化为全部小写。格式 ： | lowercase
Document {{ str |lowercase }}<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span> <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> myApp </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> angular.module(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">myApp</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">($scope){ $scope.str</span><span style="background-color: #f5f5f5; color: #000000">=</span> <span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">Hello,World!</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000"> }]) </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"></
<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>效果如下：
uppercase(大写）
把数据转化为全部小写。格式： | uppercase
Document {{ str |uppercase }}<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span> <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> myApp </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> angular.module(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">myApp</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,World!</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000"> }]) </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"></
<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>效果如下：
number(格式化数字)
格式化数字 为一个数字加上千位分割， 同时接收一个参数，指定保留几位小数 格式： | number ：[-num]
</span><span style="color: #0000ff"><</span><span style="color: #800000">br </span><span style="color: #0000ff">/></span><span style="color: #000000"> {{ 12345678 | number:3}}<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>效果如下：
orderBy(排序)
将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）
Document //按照age属性值排序 {{ arr | orderBy : "age"}} //按照函数的返回值排序 {{ arr | orderBy : fn}} //如果age相同，则按name排序 {{ arr | orderBy : ["age","name"]}}<span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span> <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> myApp </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> angular.module(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">myApp</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">,age: </span><span style="background-color: #f5f5f5; color: #000000">20</span><span style="background-color: #f5f5f5; color: #000000">} ]; $scope.fn</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(e){ </span><span style="background-color: #f5f5f5; color: #0000ff">return</span><span style="background-color: #f5f5f5; color: #000000"> e.name; } }]) </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"></
<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>效果如下：
内置的过滤器就介绍到这里了
现在来讲讲自定义的过滤器 ：filter的自定义方式很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。
形式： var app=angular.module("myapp",[]).filter("过滤器名称", function(){ return function(){....} }，返回的函数接受2个参数：参数1--表达式的值，参数2--可选
demo如下：
name | reverse input就是代表name的值。具体实例如下：Document name:{{name}} reverse:{{name | reverse}}myApp.filter(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">reverse</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){ </span><span style="background-color: #f5f5f5; color: #0000ff">return</span> <span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(input){ </span><span style="background-color: #f5f5f5; color: #0000ff">for</span><span style="background-color: #f5f5f5; color: #000000">(</span><span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> i</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">0</span><span style="background-color: #f5f5f5; color: #000000">;i</span><span style="background-color: #f5f5f5; color: #000000"><</span><span style="background-color: #f5f5f5; color: #000000">input.length;i</span><span style="background-color: #f5f5f5; color: #000000">++</span><span style="background-color: #f5f5f5; color: #000000">){ </span><span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> str</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">input.charAt(i) } </span><span style="background-color: #f5f5f5; color: #0000ff">return</span><span style="background-color: #f5f5f5; color: #000000"> str; } }) </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"></
<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>chrome显示如下：
ok，过滤器简单的总结已经差不多了，细节问题以后会慢慢补充！
