【angularJS】过滤器

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