ng内置了九种过滤

1. currency (货币处理)

  使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:

{{num | currency : '¥'}}

  2. date (日期格式化)

  原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。用法如下:

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

  参数用来指定所要的格式,y M d h m s E 分别表示 年 月 日 时 分 秒 星期,你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串,例如“shortTime”将会把时间格式为12:05 pm这样的。ng提供了八种描述性的字符串,个人觉得这些有点多余,我完全可以根据自己的意愿组合出想要的格式,不愿意去记这么多单词~

  3. filter(匹配子串)

  这个名叫filter的filter(不得不说这名字起的,真让人容易混淆——!)用来处理一个数组,然后可以过滤出含有某个子串 的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。下面 举个例子说明一下参数的用法,我用现在特别火的几个孩子定义了一个数组:

$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];$scope.func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数,指定返回age>4的

  4. json(格式化json对象)

  json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它 可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:

{{ jsonTest | json}}

  5. limitTo(限制数组长度或字符串长度)

  limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值,则从数组尾部开始截取。个人觉得这个filter有点鸡肋,首先只能从数组或字符串的开头/尾部进行截取,其次,js原生的函数就可以代替它了,看看怎么用吧:

{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项

  6. lowercase(小写)

  把数据转化为全部小写。太简单了,不多解释。同样是很鸡肋的一个filter,没有参数,只能把整个字符串变为小写,不能指定字母。怎么用我都懒得写了。

  7. uppercase(大写)

  同上。

  8. number(格式化数字)

  number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定float类型保留几位小数:

{{ num | number : 2 }}

  9. orderBy(排序)

  orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是 一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),还是拿上面的孩子数组举例:

<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序,若是-age,则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序

AngularJS 的那些内置九种过滤器的更多相关文章

  1. Spring Cloud Alibaba学习笔记(20) - Spring Cloud Gateway 内置的全局过滤器

    参考:https://cloud.spring.io/spring-cloud-static/Greenwich.SR2/single/spring-cloud.html#_global_filter ...

  2. AngularJS提供的内置过滤器

    1. currencycurrecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式.currecy过滤器允许我们自己设置货币符号.默认情况下会 ...

  3. angularjs 构建主页 内置过滤器、日期的格式化

    从构建负责管理主屏幕的 MainController 开始.在这个 MainController 控制器内,只需设置一个每秒运转一次,同时更新一个局部作用域变量的延时 angular.module(' ...

  4. django中模板变量与内置标签以及过滤器

    本文参考 官方文档 . 一  模板变量 格式: {{ variable_name }} variable_name   命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...

  5. 夺命雷公狗—angularjs—10—angularjs里面的内置函数

    我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...

  6. JSP内置九个对象Request请求对象

    jsp内置对象是什么呢? 例如Java语言使用一个对象之前需要实例化(也就是所说的new一个对象),创建对象这个过程有点麻烦,所以在jsp中提供了一些内置对象,用来实现很多jsp应用.在使用内置对象时 ...

  7. Spring Cloud内置的Zuul过滤器详解

    Spring Cloud默认为Zuul编写并启用了一些过滤器,这些过滤器有什么作用呢?我们不妨按照@EnableZuulServer.@EnableZuulProxy两个注解进行展开,相信大家对这两个 ...

  8. jsp提交表单数据乱码,内置对象,以及过滤器

    jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...

  9. shiro框架学习-6-Shiro内置的Filter过滤器及数据加解密

    1.  shiro的核心过滤器定义在枚举类DefaultFilter 中,一共有11个 ,配置哪个路径对应哪个拦截器进行处理 // // Source code recreated from a .c ...

随机推荐

  1. Hibernate征途(六)之数量和关系映射

    本来如果和关系模型一样,只需要一对一.一对多.多对多映射就够了,但是前面<Hibernate征途(四)之映射 序>中说到,对象模型中关联是有方向的,所以对一对多而言,就会产生一对多还是多对 ...

  2. 【VBA研究】怎样将单元格数据赋给数组

    作者:iamlaosong 将工作表中的数据赋给数组或者将数组的数据赋给工作表,一般有两种.一种是循环的方法,一个一个的传,这样的方法一般用于须要对每一个数据特别处理的场合,还有一种是一次性用赋值语句 ...

  3. [Angular 2] Understanding @Injectable

    In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are p ...

  4. JAVA static 作用

    static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static修饰的成员变量和成员方法独立于该类的任何 ...

  5. JAVA(2)——JDBC

    刚接触JDBC的时候,有时候就在想,为什么java要用JDBC,而不是直接使用之前在VB中就学习过的ODBC,由于ODBC是在JDBC之前出现,所以ODBC肯定由于无法完毕某些操作或者不能非常顺利的完 ...

  6. MapReduce数据连接

    对于不同文件里的数据,有时候有相应关系,须要进行连接(join),获得一个新的文件以便进行分析.比方有两个输入文件a.txt,b.txt,当中的数据格式分别例如以下 1 a 2 b 3 c 4 d 1 ...

  7. oc-01

    //#ifndef __OCDay01__aa__ //#define __OCDay01__aa__ //这2行是预编译指令,防止include的时候重复包含操作(a包含b,b又包含了a) #inc ...

  8. vs 行数

    工具->选项->文本编辑器->选择你用的语言,选中行号,即可!

  9. eclipse按Crl+鼠标左键,找不到源文件的解决办法。

    这种情况一般发生在tomcat的之中,原因是缺少类的源文件.在jdk中很少见,jdk中自带类的源文件,配置jdk的时候就已经将其加载进来了.而tomcat之中没有带类的源文件,需要自己去网上单独下载. ...

  10. SSIS 学习(7):包配置(下)【转】

    经过前面几个章节的学习,我们开发的ETL包算已经完成一大半了,但是还不够完美,正如一场足球比赛,前面大家打得很辛苦,传接得也很漂亮,但 是临门一脚的技术不过关,进不了球,一切都是白搭.今天我们就来为大 ...