AngularJS过滤器filter用法分析

前端之家收集整理的这篇文章主要介绍了AngularJS过滤器filter用法分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了AngularJS过滤器filter用法分享给大家供大家参考,具体如下:

在开发中,经常会遇到这样的场景

用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来;

如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍;

买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品;

以上三种场景分别对数据进行了转换/筛选/排序,总而言之就是对数据的格式化,AngularJS的filter就是用来做这个事的。

内置过滤器

调用过滤器

如字母转换成大写:

{{name | uppercase}} // 输出 WANGMEIJIAN

数字转成千分位写法:

{{num | number}} // 输出 12,345,678

日期格式化:

{{date | date:'yy-MM-dd'}} // 输出 2015-11-19

数字格式化成货币:

{{num | currency:'¥'}} // 输出 ¥987,654,321.00

demo示例:http://runjs.cn/code/ztgq7fwg

稍微复杂一点的过滤器——‘filter',可以返回给定数组的子集,它接收一个参数,这个参数可以是字符串、对象、函数

字符串:返回所有包含这个字符串的元素,想要返回不包含这个字符串的元素则在前面加!

demo:

对象:Angular会将待过滤对象的属性与这个对象中的同名属性进行比较,如果属性值是字符串会判断是否包含该字符串(注意这里是包含,并不需要完全相等)

demo:

输出 [{"name":"wangmeijian","sex":"boy"}]

函数:对每个元素都执行该函数,返回非假值的元素会出现在新的数组中并返回

demo:

输出 [2,3]

自定义过滤器

函数不能满足你的业务需求时,就需要自定义一个过滤器,自定义过滤器返回一个函数函数的参数就是HTML模板中|左侧的数据,它会自动传入过滤器中

比如需求是将一句话中的每个单词首字母变成大写

AngularJS过滤器filter入门

需要注意的是,内置过滤器‘filter'的参数是函数时,会对数组的每个元素执行该函数自定义过滤器是对数组对象执行它return的函数

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》及《

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

猜你在找的JavaScript相关文章