详解AngularJS过滤器的使用

AnularJS的过滤器用来格式化需要展示给用户的数据，有很多实用的内置过滤器，也可以自己编写。
在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串
转换成大写，可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器：
{{ name | uppercase }}
在JavaScript代码中可以通过$filter来调用过滤器。例如，在JavaScript代码中使用lowercase
过滤器：

app.controller（"DemoController", ["$scope", "$filter",function（$scope, $filter） {$scope.name = $filter（"lowercase"）（"Ari"）;}]）;

以HTML的形式使用过滤器时，如果需要传递参数给过滤器，只要在过滤器名字后面加冒号
即可。如果有多个参数，可以在每个参数后面都加入冒号。例如，数值过滤器可以限制小数点后
的位数，在过滤器后写上:2可以将2作为参数传给过滤器：

<！-- 显示：123.46 -->{{ 123.456789 | number:2 }}

1. currency
currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化
成货币格式。
currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号，
但是也可以自定义货币符号。
2. date
date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式，如果没有
指定使用任何格式，默认会采用mediumDate格式，下面的例子中展示了这个格式。
下面是内置的支持本地化的日期格式：

{{ today | date:"medium" }} <！-- Aug 09, 2013 12:09:02 PM -->{{ today | date:"short" }} <！-- 8/9/1312:09PM -->{{ today | date:"fullDate" }} <！-- Thursday, August 09, 2013 -->{{ today | date:"longDate" }} <！-- August 09, 2013 -->{{ today | date:"mediumDate" }}<！-- Aug 09, 2013 -->{{ today | date:"shortDate" }} <！-- 8/9/13 -->{{ today | date:"mediumTime" }}<！-- 12:09:02 PM -->{{ today | date:"shortTime" }} <！-- 12:09 PM -->

年份格式化
四位年份：{{ today | date:"yyyy" }} <！-- 2013 -->
两位年份：{{ today | date:"yy" }} <！-- 13 -->
一位年份：{{ today | date:"y" }} <！-- 2013 -->
月份格式化
英文月份：{{ today | date:"MMMM" }} <！-- August -->
英文月份简写：{{ today | date:"MMM" }} <！-- Aug -->
数字月份：{{ today |date:"MM" }} <！-- 08 -->
一年中的第几个月份：{{ today |date:"M" }} <！-- 8 -->
日期格式化
数字日期：{{ today|date:"dd" }} <！-- 09 -->
一个月中的第几天：{{ today | date:"d" }} <！-- 9 -->
英文星期：{{ today | date:"EEEE" }} <！-- Thursday -->
英文星期简写：{{ today | date:"EEE" }} <！-- Thu -->
小时格式化
24小时制数字小时：{{today|date:"HH"}} <！--00-->
一天中的第几个小时：{{today|date:"H"}} <！--0-->
12小时制数字小时：{{today|date:"hh"}} <！--12-->
上午或下午的第几个小时：{{today|date:"h"}} <！--12-->
分钟格式化
数字分钟数：{{ today | date:"mm" }} <！-- 09 -->
一个小时中的第几分钟：{{ today | date:"m" }} <！-- 9 -->
秒数格式化
数字秒数：{{ today | date:"ss" }} <！-- 02 -->
一分钟内的第几秒：{{ today | date:"s" }} <！-- 2 -->
毫秒数：{{ today | date:".sss" }} <！-- .995 -->
下面是一些自定义日期格式的示例：

{{ today | date:"MMMd, y" }} <！-- Aug9, 2013 -->{{ today | date:"EEEE, d, M" }} <！-- Thursday, 9, 8-->{{ today | date:"hh:mm:ss.sss" }} <！-- 12:09:02.995 -->

filter
filter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回。
例如，用下面的过滤器可以选择所有包含字母e的单词：

{{ ["Ari","Lerner","Likes","To","Eat","Pizza"] | filter:"e" }}<！-- ["Lerner","Likes","Eat"] -->

如果要过滤对象，可以使用上面提到的对象过滤器。例如，如果有一个由people对象组成的
数组，每个对象都含有他们最喜欢吃的食物的列表，那么可以用下面的形式进行过滤：

{{ [{"name": "Ari","City": "San Francisco","favorite food": "Pizza"},{"name": "Nate","City": "San Francisco","favorite food": "indian food"}] | filter:{"favorite food": "Pizza"} }}<！-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

也可以用自定义函数进行过滤（在这个例子中函数定义在$scope上）：

{{ ["Ari","likes","to","travel"] | filter:isCapitalized }}<！-- ["Ari"] -->

isCapitalized函数的功能是根据首字母是否为大写返回true或false，具体如下所示：

$scope.isCapitalized = function（str） {return str[0] == str[0].toUpperCase（）;};

自定义过滤器
首先，创建一个模块用以在应用中进行引用

angular.module（"myApp.filters", []）.filter（"capitalize", function（） {return function（input） {// input是我们传入的字符串if （input） {return input[0].toUpperCase（） + input.slice（1）;}}）;

现在，如果想将一个句子的首字母转换成大写形式，可以用过滤器先将整个句子都转换成小
写，再把首字母转换成大写：

<！-- Ginger loves dog treats -->{{ "ginger loves dog treats" | lowercase | capitalize }}

以上就是AngularJS过滤器的使用方法，希望对大家的学习有所帮助。