1.分类:
《1》内置过滤器(见4)
《2》自定义过滤器
2.作用:接收一个输入,通过某个规则进行处理,然后返回处理后的结果
3.应用:
《1》在模板中使用
用法 | 说明 |
{{ expression | filter }} |
直接在{{}}中使用filter,跟在表达式后面用 | 分割 |
{{ expression | filter1 | filter2 | ... }} |
也可以多个filter连用 上一个filter的输出将作为下一个filter的输入 |
{{ expression | filter:argument1:argument2:... }} |
filter可以接收参数, 参数用 : 进行分割 |
<span ng-repeat="a in array | filter ">
|
在指令中使用filter 先对数组array进行过滤处理,然后再循环输出: |
《2》在controller和service中使用filter
代码:
运行结果:
$123,534.00
Mar 15, 2016
4.内置过滤器详述
《1》currency (货币处理)注意:默认是美元符号,要是输入人民币 :{{num | currency : '¥'}} |
《2》.date (日期格式化) {{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}y M d h m s E 分别表示 年 月 日 时 分 秒 星期 |
《3》filter(匹配子串) 它接收一个参数,用来定义子串的匹配规则。 |
《4.》son(格式化json对象) |
《5》limitTo(限制数组长度或字符串长度) |
《6》lowercase(小写) |
《7》uppercase(大写) |
《8》number(格式化数字)可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定小float类型保留几位小数 |
《9》orderBy(排序) |
例子:
执行结果:
{{arr | filter:4}}-------------------------》3个[{"name":"cindy","age":4}] (解释:匹配属性值含4的)
{{arr | filter:'a'}}------------------------》3个[{"name":"tiantian","age":7},{"name":"tiantian","age":6}] (解释:匹配属性值含a的)
{{ arr | filter : {name : 'i'} }} ---------》3个 [{"name":"kimi","age":3},{"name":"tiantian","age":7},{"name":"tiantian","age":6},{"name":"cindy","age":4}] (解释:参数是对象,匹配name属性中含有i的)
{{arr | filter: func}}----------------------》3个 [{"name":"tiantian","age":7},{"name":"tiantian","age":6}] (解释:参数是函数,指定返回age>4的)
{{arr | limitTo:2}}------------------------》3个 [{"name":"kimi","age":3},{"name":"tiantian","age":7}] (解释:限制数组的长度,显示数组前2项)
{{'welcome' | uppercase}}---------------》3个 WELCOME (解释:大写)
5.自定义过滤器:
解释:使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。
例子:定义日期的过滤器(2016/3/15)
app.filter('mydate',function(){
return function(time){
var oDate=new Date();
oDate.setTime(time);
return oDate.getFullYear()+'/'+(oDate.getMonth()+1)+'/'+oDate.getDate();
};
});
作者:smile.轉角
QQ:493177502