自学angular系列―过滤器（内置和自定义）

自学angular系列―过滤器（内置和自定义）过滤器主要用来“格式化”需要展示给用户的数据，angular提供了很多内置的过滤器，当然还有，功能强大的自定义过滤器。 一般有两种形式使用angular的过滤器：（1） 在js中，通过$filter来调用过滤器（2） 在HTML中使用“|”，（支持传入参数）比如：现在要将字符转成大写在js中就是这样：

app.controller("testController",['$scope',$filter', function($scope, $filter)
{
$scope.keywords= $filter('uppercase').('jiaxiangjun')

}])

如果在HTML中的话，就很简单一行代码搞定，所以下面介绍过滤器主要就是这种方式。

{{filterWords | uppercase}}

1， 字符串大小写

{{filterWords | uppercase}}
{{filterWords | lowercase}}

2， 数字类型Number过滤器会将数字格式化成文本，第二个参数是可选的，用来保留有效数字。

{{filterWords | number}}
{{12.499 | number:2}}//保留两位有效数字，四舍五入

3，货币格式-currency

{{12.499 | currency}}

4,时间格式-date
内置的本地化日期格式：

{{today |date:"medium"}}
{{today |date:"short"}}
{{today |date:"fullDate"}}
{{today |date:"longDate"}}
{{today | date:"mediumDate"}}
{{today |date:"shortDate"}}
{{today |date:"mediumTime"}}
{{today |date:"shortTime"}}

年份格式化

四位年份：{{today | date:"yyyy"}}
两位年份：{{today | date:"yy"}}
1位年份：{{today | date:"y"}}

月份格式化

英文月份：{{today| date:"MMMM"}}
英文月份简写：{{today| date:"MMM"}}
数字月份：{{today| date:"MM"}}
一年中的第几个月份：{{today| date:"M"}}

日期格式化

数字日期：{{today| date:"dd"}}
一个月中的第一天：{{today| date:"d"}}
英文星期：{{today| date:"EEEE"}}
英文星期缩写：{{today| date:"EEE"}}

小时格式化

24小时制数字小时：{{today| date:"HH"}}
一天中的第几个小时：{{today| date:"H"}}
12小时制数字小时：{{today| date:"hh"}}
上午或者下午的第几个小时：{{today| date:"h"}}

分钟格式化

数字分钟数：{{today| date:"mm"}}
一个小时的第几分钟：{{today| date:"m"}}

秒数格式化

数字秒数：{{today| date:"ss"}}
一分钟的第几秒：{{today| date:"s"}}
毫秒数：{{today| date:"sss"}}

字符格式化

上下午标示：{{today| date:"a"}}
四位时区标示：{{today| date:"Z"}}

5, json,可以将json或者js对象转成字符串，主要对调试很有帮助
6，filter 从数组中选出子集，接受两个参数
第一个参数：字符串：返回包含所有这个字符串的元素；对象：angular会对待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。函数：对每个元素都执行该函数，返回非假值的元素会出现在新的数组中并返回。如下所示：

<div>
<span>{{["jxj","hmj","lpj"]| filter:'h'}}</span>
<div>
<div>
<span>{{[{'name':"jxj",work:'fed'}, {'name':'hmj', work:'test'}, {'name':'lpj', 'work':'se'}]| filter:{'name':'hmj', work:'test2'} }}
</span>
<div>
<div>
<span>{{ ["Ari","likes", "to", "travel"] | filter : isCapitalized}}
</span>
</div>

$scope.isCapitalized = function(str)
{
return str[0] ==str[0].toUpperCase();
};

第二个参数：True:对两个值进行严格匹配；False:进行区分大小写的字符串比较函数：运行这个函数，如果返回真值就接受这个元素。 7，limitTolimitTo过滤器会根据传入的参数生成一个新的数组或者字符串，新的数组或者字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是后面开始截取。

<div>
<span>{{ ["Ari","likes", "to", "travel"] | limitTo : 3 }}
</span>
</div>

<div>
<span>{{ ["Ari","likes", "to", "travel"] | limitTo : -3 }}
</span>
</div>

<div>
<span>{{ '1234567890' |limitTo : -3 }}
</span>
</div>

8，orderBy,可以用表达式对指定的数组进行排序，接受两个参数
第一个参数： 字符串：按照该属性进行排序； 函数：按照函数的返回值进行排序数组：两个条件进行排序如下：

<div>
<span>{{[{'name':"jxj",work:'fed'}, {'name':'hmj', work:'test'}, {'name':'lpj', 'work':'se'}]| orderBy:'name'  }}
</span>
</div>
<div>
<span>{{[{'name':"jxj", work:'se'},{'name':'hmj', work:'test'}, {'name':'lpj', 'work':'se'}]| orderBy:['work', 'name'] }}
</span>
</div>
<div>
<span>{{[1, 3, 5, 7] | orderBy : increment }}
</span>
</div>
$scope.increment = function(str)
{
if(str>5)
{
str = str - 3
}
else
{
str = str + 1
}
return str;
};

第二个参数：用来控制排序的方向，是否逆向。 自定义过滤器
Angular中除了支持基本的过滤器外，还提供了强大的自定义过滤器。在很多情况下我们都需要自己写具体业务相关的过滤器，所以自定义过滤器至关重要。
下面拘留一个简单的例子，

<div><label>请输入关键字：</label><input ng-model="keywords" placeholder="支持名称，邮箱模糊查询"/></div>
<label>{{keywords | keywordsFilter}}</label>

myspace.filter('keywordsFilter',function()
{
returnfunction(input)
{
if(input)
{
return input[0].toUpperCase() + input.slice(1);
}
}
});

本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1626139