angular JS 过滤器

过滤器：

 过滤器用来格式化需要展示给用户的数据。 AngularJS有很多实用的内置过滤器，也可以自己创建过滤器。

可以使用过滤器：  前面是数据， 后面是格式
　　　　　　　　　　{{ name | uppercase }} 

可以通过$filter来调用过滤器，

app.controller('DemoController', ['$scope', '$filter',function($scope, $filter) {
　　　　　　　　$scope.name = $filter('lowercase')('Ari');　　　　//使用小写过滤器，将 Ari  转换成  ari
}]);

数值过滤器可以限制小数点后的位数，
{{ 123.456789 | number:2 }}        //显示： 123.46
可以用|符号作为分割符来同时使用多个过滤器， 

AngularJS提供的内置过滤器:

currecy过滤器可以将一个数值格式化为货币格式。
{{ 123 | currency }}        //显示： $123.00 
date过滤器可以将日期格式化成需要的格式：
{{ 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:'a' }}     // AM 
四位时区标识： {{ today | date:'Z' }}     // 0700 

下面是一些自定义日期格式的示例：
{{ 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过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回

过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。
下面分情况介绍传入不同类型的参数。
 字符串　　　　返回所有包含这个字符串的元素。　　如果我们想返回不包含该字符串的元素，在参数前加!符号。

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} // ["Lerner","Likes","Eat"] 

 对象　　待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比，可以将$当作键名。

{{ [{ '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"}] 

 函数 对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返会。 
 
 {{ ['Ari','likes','to','travel'] | filter:isCapitalized }} // ["Ari"] 
　　 $scope.isCapitalized = function(str) { return str[0] == str[0].toUpperCase(); };


 将下面的对象数组用name字段进行排序： 
{{ [{ 'name': 'Ari', 'status': 'awake' },
　　{ 'name': 'Q', 'status': 'sleeping' },
　　{ 'name': 'Nate', 'status': 'awake' }] | orderBy:'name' }} 
　　

<!-- [ {"name":"Ari","status":"awake"}, {"name":"Nate","status":"awake"}, {"name":"Q","status":"sleeping"} ] --> 

也可以对排序结果进行反转。例如，通过将第二个参数设置为true可以将排序结果进行反转： 

{{ [{ 'name': 'Ari', 'status': 'awake' },
　　{ 'name': 'Q', 'status': 'sleeping' },
　　{ 'name': 'Nate','status': 'awake' }] | orderBy:'name':true }} 

<!-- [ {"name":"Q","status":"sleeping"}, {"name":"Nate","status":"awake"}, {"name":"Ari","status":"awake"} ] -->

自定义过滤器：

将字符串的第一个字母转为大写：

angular.module('app', [])
        .filter('capitalize', function() {
            return function(input) {
                // input是我们传入的字符串
                if (input) {
                    return input[0].toUpperCase() + input.slice(1);
                }
            }
        });

如果想将一个句子的首字母转换成大写形式，可以用过滤器先将整个句子都转换成小写，再把首字母转换成大写：
{{ 'ginger loves dog treats' | lowercase | capitalize }}