AngularJS（六）——过滤器
发布时间：2020-12-17 10:10:37 所属栏目：安全 来源：网络整理
导读：过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提 供了方便的途径可以自己创建过滤器。 在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。 将字符串 转换成大写： {{ name | uppercase }} 内置过滤器： 1. curren
|
过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器。
在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。将字符串转换成大写：{{ name | uppercase }}
内置过滤器：
1. currency
currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。
2. date
date 过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式，如果没有指定使用任何格式，默认会采用 mediumDate 格式，下面的例子中展示了这个格式。
下面是内置的支持本地化的日期格式：
<span style="font-size:18px;">{{ today | date:'medium' }} <!-- Aug 09,2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday,August 09,2013 -->
{{ today | date:'longDate' }} <!-- August 09,2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09,2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM --></span>
年份格式化
<span style="font-size:18px;">四位年份：{{ today | date:'yyyy' }} <!-- 2013 -->
两位年份：{{ today | date:'yy' }} <!-- 13 -->
一位年份：{{ today | date:'y' }} <!-- 2013 --></span>
月份格式化
<span style="font-size:18px;">英文月份：{{ today | date:'MMMM' }} <!-- August -->
英文月份简写：{{ today | date:'MMM' }} <!-- Aug -->
数字月份：{{ today |date:'MM' }} <!-- 08 -->
一年中的第几个月份：{{ today |date:'M' }} <!-- 8 --></span>
日期格式化
<span style="font-size:18px;">数字日期：{{ today|date:'dd' }} <!-- 09 -->
一个月中的第几天：{{ today | date:'d' }} <!-- 9 -->
英文星期：{{ today | date:'EEEE' }} <!-- Thursday -->
英文星期简写：{{ today | date:'EEE' }} <!-- Thu --></span>
小时格式化
<span style="font-size:18px;">24小时制数字小时：{{today|date:'HH'}} <!--00-->
一天中的第几个小时：{{today|date:'H'}} <!--0-->
12小时制数字小时：{{today|date:'hh'}} <!--12-->
上午或下午的第几个小时：{{today|date:'h'}} <!--12--></span>
分钟格式化
<span style="font-size:18px;">数字分钟数：{{ today | date:'mm' }} <!-- 09 -->
一个小时中的第几分钟：{{ today | date:'m' }} <!-- 9 --></span>
秒数格式化
<span style="font-size:18px;">数字秒数：{{ today | date:'ss' }} <!-- 02 -->
一分钟内的第几秒：{{ today | date:'s' }} <!-- 2 -->
毫秒数：{{ today | date:'.sss' }} <!-- .995 --></span>
字符格式化
<span style="font-size:18px;">上下午标识：{{ today | date:'a' }} <!-- AM -->
四位时区标识：{{ today | date:'Z' }} <!--- 0700 --></span>
3. filter
filter 过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。例如，在做客户端搜索时，可以从一个数组中立刻过滤出所需的结果。
这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。
<span style="font-size:18px;">{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->
{{ [{
'name': 'Ari','City': 'San Francisco','favorite food': 'Pizza'
},{
'name': 'Nate','favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] --></span>
4. json
json 过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助：
<span style="font-size:18px;">{{ {'name': 'Ari','City': 'SanFrancisco'} | json }}
<!--
{
"name": "Ari","City": "San Francisco"
}
--></span>
5. limitTo
决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。
例如，我们可以截取字符串的前三个字符：
<span style="font-size:18px;">{{ San Francisco is very cloudy | limitTo:3 }}
<!-- San --></span>
或最后的六个字符：
<span style="font-size:18px;">{{ San Francisco is very cloudy | limitTo:-6 }}
<!-- cloudy --></span>
<span style="font-size:18px;"> </span>
6. lowercase
lowercase 过滤器将字符串转为小写。
<span style="font-size:18px;">{{ "San Francisco is very cloudy" | lowercase }}
<!-- san francisco is very cloudy -->
</span>
7. number
number 过滤器将数字格式化成文本。 它的第二个参数是可选的， 用来控制小数点后截取的位数。
如果传入了一个非数字字符，会返会空字符串。
<span style="font-size:18px;">{{ 123456789 | number }}
<!-- 1,234,567,890 --></span>
8. orderBy
orderBy 过滤器可以用表达式对指定的数组进行排序。
我们将下面的对象数组用 name 字段进行排序：
<span style="font-size:18px;">{{ [{
'name': 'Ari','status': 'awake'
},{
'name': 'Q','status': 'sleeping'
},'status': 'awake'
}] | orderBy:'name' }}
<!--
[
{"name":"Ari","status":"awake"},{"name":"Nate",{"name":"Q","status":"sleeping"}
]
--></span>
9. uppercase
uppercase 过滤器可以将字符串转换为大写形式：
<span style="font-size:18px;">{{ "San Francisco is very cloudy" | uppercase }}
<!-- SAN FRANCISCO IS VERY CLOUDY --></span>
自定义过滤器
也就定义一个函数，把要求写在里边，然后返回。
例如：
<span style="font-size:18px;">angular.module('myApp.filters',[])
.filter('capitalize',function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});
</span>
<span style="font-size:18px;"><!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}</span>
总结
知识积累，大家有空看看，给大家留个印象。
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |