【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

原文地址:https://www.cnblogs.com/websmile/p/5292394.html