微客导航 » 文章资讯 » AngularJS常见过滤器用法实例总结

AngularJS常见过滤器用法实例总结

2024-02-16 20:09:03 293

本文实例讲述了AngularJS常见过滤器用法。分享给大家供大家参考，具体如下：

过滤器用来格式化需要展示给用户的数据。在HTML中的模板绑定符号{{}}内通过|符号来调用过滤器。以下是常用的过滤器。

大小写过滤器

{{name|uppercase}}大写过滤器
{{name|lowercase}}小写过滤器

实例：（大写过滤器）


姓氏:


名字:


名字转大写:{{student.fullName()|uppercase}}

货币过滤器

currecy过滤器可以将一个数值格式化为货币格式。用{{123|currency}}来将123转化成货币格式。currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号，但是也可以自定义货币符号。如下：


Enterfees:

fees:{{student.fees|currency:'￥'}}

日期过滤器

date过滤器可以将日期格式化成需要的格式。如下：


{{data|date:'yyyy-MM-ddhh:mm:ssEEEE'}}

limitTo过滤器

limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度。实例：


{{childrenArray|limitTo:2}}

orderBy过滤器：

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

{{childrenArray|orderBy:'age'}}//按age属性值进行排序
{{childrenArray|orderBy:orderFunc}}//按照函数的返回值进行排序
{{childrenArray|orderBy:['age','name']}}//如果age相同，按照name进行排序

自定义过滤器：

AngularJS编写自定义过滤器的形式和AngularJS的factoryservice非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可。格式大致如下：

app.filter('filter(过滤器)名称',function(){
returnfunction(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...执行业务逻辑代码
return处理后的对象;
}
});

实例：（首字母大写）

{{'gingerlovesdogtreats'|capitalize}}

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

AngularJS常见过滤器用法实例总结

热门推荐

随机推荐