在AngularJS中 ,过滤器可以使用一个管道符(|)添加到表达式和指令中 。angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。
简单的说一些内置控制器,不全,但经常见到
先把script给大家 方便理解
![](https://img.haomeiwen.com/i3871772/1e041d67362a603b.png)
1、货币格式处理currency允许我们设置自己的货币符号,默认情况下会采用客户端所处区域的货币符号。可以这样使用:{{ 3600 | currency: "$¥"}}返回结果为$¥123.00
![](https://img.haomeiwen.com/i3871772/83674cec0c285dad.png)
![](https://img.haomeiwen.com/i3871772/3b7b0c6acde8ee65.png)
2、字母大小写转换。uppercase 转换成大写 ; lowercase 转换成小写
![](https://img.haomeiwen.com/i3871772/1e34f84d81519cf5.png)
![](https://img.haomeiwen.com/i3871772/399e649ebfacbcad.png)
3、限制字符串或数组的长度 limitTo:3 限制长度为3 在管道符后面 管道符可连续使用,相当于多次过滤
![](https://img.haomeiwen.com/i3871772/00f920b3ef4b554c.png)
![](https://img.haomeiwen.com/i3871772/830c1710403f99ef.png)
4、给数字设置千分位 number : 2,保留两位小数
![](https://img.haomeiwen.com/i3871772/ba055282f8b95961.png)
![](https://img.haomeiwen.com/i3871772/1025738ab27e13d7.png)
5、日期格式转化 这里大家可以上网搜一下日期秒数的时间戳,精确到毫秒,给大家一个网站http://tool.chinaz.com/Tools/unixtime.aspx,可以搜一下
![](https://img.haomeiwen.com/i3871772/1932202db49ace5b.png)
![](https://img.haomeiwen.com/i3871772/e239fae0a079d758.png)
6、普通数组排序 默认是升序,和老师的名字重了,升序排列是orderBy,,降序排列是orderBy:order:true
![](https://img.haomeiwen.com/i3871772/61d4bb385cd2944c.png)
![](https://img.haomeiwen.com/i3871772/4916999aea9e9a81.png)
![](https://img.haomeiwen.com/i3871772/0354e35a7f263e47.png)
7、数组中有对象的排序(按照对象的某个属性去排序)或者其他的属性来排序都行
![](https://img.haomeiwen.com/i3871772/6cdc6f480da2fb39.png)
![](https://img.haomeiwen.com/i3871772/4e23419088096d4e.png)
下面利用过滤器写一个小功能,
![](https://img.haomeiwen.com/i3871772/a0970b3ac5623d9b.png)
这里面有条件过滤和条件排序两个功能。在条件过滤中写ng-model="ctrl.queryFilter",意思是按照input输入框输入的值去过滤,在条件排序中设置ng-model="ctrl.orderType"意思是按照下拉框中的条件进行过滤,然后在要输出的标签内部写出和它们相对应的过滤属性名字,相当于进行条件设置。 里面还有个小错误 在li标签里的ng-repeat 写成了repear ,很抱歉手误,运行结果
![](https://img.haomeiwen.com/i3871772/0ededfa81dd93851.gif)
发现gif不好使 ,这Tama就尴尬了,回头我再搞
自定义过滤器:功能是根据字符某个串,过滤掉这个字符串中的数字。思想也特别简单,就是利用正则表达式把里面的数字进行筛选,然后利用angularJS的写法进行编译
![](https://img.haomeiwen.com/i3871772/5836b853881f64c3.png)
![](https://img.haomeiwen.com/i3871772/1b8c824673b21277.png)
网友评论