本文将带你了解WEBAPP开发之AngularJS 过滤器，希望本文对大家学WEBAPP有所帮助。

1、currency###
currecy过滤器可以将一个数值格式化为货币格式，{{123|currecy}}将123转化成货币格式
2、date###
date过滤器能将日期格式化成需要的格式,默认采用mediumDate格式
{{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'}}
{{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'}}

//小时
{{today|date:'HH'}}
{{today|date:'H'}}
{{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'}}

//自定义
{{today|date:'MMMd,y'}}
{{today|date:'EEEE,d,M'}}
{{today|date:'hh:mm:ss.sss'}}

3、filter###
filter过滤器可以从给定的数组中选择一个子集，并将其生成一个新数组返回，
filter第一个参数，可以是字符串，对象，或者函数
字符串：
返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加！符号
{{['Ari','Lerner','Likes','To','Eat','Pizza']|filter:'e'}}
结果

{{['Ari','Lerner','Likes','To','Eat','Pizza']|filter:'!e'}}
结果

对象:
AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串，就会判断是否包含该字符串。
例如：有一个由people对象组成的数组
{{[{
'name':'Ari',
'City':'SanFrancisco',
'favoritefood':'Pizza'
},{
'name':'Nate',
'City':'SanFrancisco',
'favoritefood':'indianfood'
}]|filter:{'favoritefood':'Pizza'}}}
//将favoritefood为Pizza的过滤出来
结果：

函数：
对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。
例如：
//每一个元素都会执行，isCapitalized函数
{{['Ari','likes','to','travel']|filter:isCapitalized}}


$scope.isCapitalized=function(str){
//toUpperCase()是转换成大写
//判断首之母是否大写并返回true,flase
returnstr[0]==str[0].toUpperCase();
};


4、json###
json过滤器可以将一个JSON或JavaScript对象转换成字符串
{{{'name':'Ari','City':'SanFrancisco'}|json}}


5、limitTo###
limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入参数。
{{SanFranciscoisverycloudy|limitTo:-2}}


{{['a','b','c','d','e','f']|limitTo:2}}


6、lowercase###
lowercase过滤器将字符串转为小写
{{"AAABBBCCC"|lowercase}}


7、number###
number过滤器将数字格式化成文本，第二个参数可以截取小数点位数
{{1.234567|number:1}}


8、orderBy###
orderBy过滤器可以用表达式对指定的数组进行排序，orderBy有两个参数
第一个参数是用来确定数组排序方向的谓词
第二个参数BOOL类型,用来控制排序的方向（是否逆向）
9、uppercase###
uppercase过滤器将字符串转为大写
{{"aaabbbccc"|lowercase}}


10、自定义过滤器###
例如我们要创建一个自定义过滤器，将传入的字符窜第三个字符变成大写
首先，创建一个模块用以在应用中进行引用
angular.module('myApp.filters',[])
//定义一个名字为capitalize过滤器
.filter('capitalize',function(){
returnfunction(input){
returninput[0].toUpperCase()+input.slice(3);
}
});


现在，先将句子全部转换成小写，再执行了capitalize过滤器
{{'GingerLovesDogTreats'|lowercase|capitalize}}
结果：

11、表单过滤器###
//novalidate属性规定当提交表单时不对其进行验证（不用浏览器对表单的默认验证行为）

Youremail



//1.加上required代表必填项


//2.验证表单输入文本长度是否大于某个最小值，这里的意思是最小输入5个字符


//3.验证表单输入文本长度是否大于某个最大值，这里的意思是最多输入5个字符


//4.匹配相应的正则表达式


//5.邮件类型


//6.数字


//7.URL
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！