过滤器简介

文章目录

过滤器简介1.将数字转换为货币字符串2.将日期对象格式化为字符串3.对集合中元素进行过滤，只保留符合条件的元素4.将Javascript对象转换成JSON字符串5.截取数组、类数组结构、字符串等数据中间一段6.把字符串转换成小写形式7.把数据转换成字符串8.用于对数组、类数组结构的元素进行排序9.把字符串转换成大写形式

1.将数字转换为货币字符串

currency

HTML模板中用法:

{{currency_expression | currency : symbol : fractionSize }}

JavaScript中用法:

$filter('currency')(amount, symbol, fractionSize)

其中symbol指定货币符号，fractionSize指定小数部分的位数

2.将日期对象格式化为字符串

date

HTML模板中用法:

{{date_expression | date : format: timezone }}

JavaScript中用法:

$filter('date')(date, format, timezone)

其中format指定格式化模板，timezone指定时区,如：’+0430’

3.对集合中元素进行过滤，只保留符合条件的元素

filter

HTML模板中用法:

{{filter_expression | filter : expression : comparator : anyPropertyKey }}

JavaScript中用法:

$filter('filter')(array, expression, comparator, anyPropertyKey)

其中expression指定过滤条件，该过滤条件可以是字符串、对象、函数：comparator指定判断相等的比较函数：anyPropertyKey指定执行比较的属性名。

4.将Javascript对象转换成JSON字符串

json

HTML模板中用法:

{{json_expression | json : spacing }}

JavaScript中用法:

$filter('json')(object, spacing)

其中spacing指定转换得到JSON字符串的缩进字符数,默认为2

5.截取数组、类数组结构、字符串等数据中间一段

limitTo

HTML模板中用法:

{{limitTo_expression | limitTo ：limit : begin }}

JavaScript中用法:

$filter('limitTo')(input, limit, begin)

其中limit指定截取的结束点，如果limit是正数，则limitTo从源数据的开头开始截取，如果limit是负数，则limitTo从源数据的结尾开始截取，begin则指定截取的开始点，该参数默认是0

6.把字符串转换成小写形式

lowercase

HTML模板中用法:

{{lowercase_expression | lowercase }}

JavaScript中用法:

$filter('lowercase')(str)

7.把数据转换成字符串

number

HTML模板中用法:

{{number_expression | number : fractionSize }}

JavaScript中用法:

$filter('number')(number, fractionSize)

其中fractionSize指定格式化后小数部分的位数

8.用于对数组、类数组结构的元素进行排序

orderBy

HTML模板中用法:

{{orderBy_expression | orderBy：expression：reverse : comparator }}

JavaScript中用法:

$filter('orderBy')(collection, expression, reverse, comparator)

其中expression指定排序规则，例如指定“label”表明根据集合元素的label属性排序，指定‘label.substring(0,3)’则根据集合元素的前3个字符排序，还可使用+控制升序排列，-控制降序排列，例如‘-label’指定根据集合元素的label属性降序排列，reverse指定是否反序排列，comparator用于指定自定义的大小比较函数。

9.把字符串转换成大写形式

uppercase

HTML模板中用法:

{{uppercase_expression | uppercase }}

JavaScript中用法:

$filter('uppercase')(str)

如果觉得《AngularJs内置过滤器》对你有帮助，请点赞、收藏，并留下你的观点哦！