angularJS过滤器
过滤器(filter)正如其名,作用就是接收一个输入(隐式的接收数据源),通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。
ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。
过滤器的使用:过滤器可以使用一个管道字符(|)添加到表达式和指令中。
具体使用:
currency(格式化货币单位)
格式:| currency:[-货币单位(可以自定义,默认是$)] :[-小数指定位数(自动四舍五入),默认是2位小数] 注:本章凡是有[-] ,代表是可选参数
Document {
{ 12 + 12 + 0.01 | currency}}{
{ 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 }}
效果如下:
json(格式化json对象)
格式: | json 无参数 json过滤器可以把一个js对象格式化为json字符串 作用就和我们熟悉的JSON.stringify()一样。用法超级简单:
{ { jsonTest | json}}
Document {
{ oJson | json }}
效果如下:
limitTo(限制数组长度或者字符串长度)
limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度 注:只能从数组或者字符串的开头截取
Document {
{ oJson | limitTo : 1 }}
效果如下:
lowercase(小写)
把数据转化为全部小写。格式 : | lowercase
Document {
{ str |lowercase }}
效果如下:
uppercase(大写)
把数据转化为全部小写。格式: | uppercase
Document {
{ str |uppercase }}
效果如下:
number(格式化数字)
格式化数字 为一个数字加上千位分割, 同时接收一个参数,指定保留几位小数 格式: | number :[-num]
{ { "3456789" | number}} { { 12345678 | number:3}}
效果如下:
orderBy(排序)
将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较)
Document //按照age属性值排序{ { arr | orderBy : "age"}}//按照函数的返回值排序{ { arr | orderBy : fn}}//如果age相同,则按name排序{ { arr | orderBy : ["age","name"]}}
效果如下:
内置的过滤器就介绍到这里了
现在来讲讲自定义的过滤器 :filter的自定义方式很简单,使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。
形式: var app=angular.module("myapp", []).filter("过滤器名称", function(){ return function(){....} },返回的函数接受2个参数:参数1--表达式的值,参数2--可选
demo如下:
myAppModule.filter("reverse",function(){ return function(input,uppercase){ var out = ""; for(var i=0 ; i
name | reverse input就是代表name的值。 具体实例如下:
Document name:{ {name}}reverse:{ {name | reverse}}
chrome显示如下:
ok,过滤器简单的总结已经差不多了,细节问题以后会慢慢补充!