1. currency
currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化成货币格式。
currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,但是也可以自定义货币符号。
2. date
date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用mediumDate格式,下面的例子中展示了这个格式。
下面是内置的支持本地化的日期格式:

{{ 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 -->

 年份格式化
四位年份:{{ today | date:'yyyy' }} <!-- 2013 -->
两位年份:{{ today | date:'yy' }} <!-- 13 -->
一位年份:{{ today | date:'y' }} <!-- 2013 -->
 月份格式化
英文月份:{{ today | date:'MMMM' }} <!-- August -->
英文月份简写:{{ today | date:'MMM' }} <!-- Aug -->
数字月份:{{ today |date:'MM' }} <!-- 08 -->
一年中的第几个月份:{{ today |date:'M' }} <!-- 8 -->
 日期格式化
数字日期:{{ today|date:'dd' }} <!-- 09 -->
一个月中的第几天:{{ today | date:'d' }} <!-- 9 -->
英文星期:{{ today | date:'EEEE' }} <!-- Thursday -->
英文星期简写:{{ today | date:'EEE' }} <!-- Thu -->

 小时格式化
24小时制数字小时:{{today|date:'HH'}} <!--00-->
一天中的第几个小时:{{today|date:'H'}} <!--0-->
12小时制数字小时:{{today|date:'hh'}} <!--12-->
上午或下午的第几个小时:{{today|date:'h'}} <!--12-->
 分钟格式化
数字分钟数:{{ today | date:'mm' }} <!-- 09 -->
一个小时中的第几分钟:{{ today | date:'m' }} <!-- 9 -->
 秒数格式化
数字秒数:{{ today | date:'ss' }} <!-- 02 -->
一分钟内的第几秒:{{ today | date:'s' }} <!-- 2 -->
毫秒数:{{ today | date:'.sss' }} <!-- .995 -->
 字符格式化
上下午标识:{{ today | date:'a' }} <!-- AM -->
四位时区标识:{{ today | date:'Z' }} <!--- 0700 -->
下面是一些自定义日期格式的示例:
{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->
3. filter
filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。这个过滤器常用来过滤需要进行展示的元素。例如,在做客户端搜索时,可以从一个数组中立刻过滤出所需的结果。这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。
下面分情况介绍传入不同类型的参数。
 字符串
返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素,在参数前加!符号。
 对象
AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较,如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比,可以将$当作键名。

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

例如,用下面的过滤器可以选择所有包含字母e的单词:
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->
如果要过滤对象,可以使用上面提到的对象过滤器。例如,如果有一个由people对象组成的
数组,每个对象都含有他们最喜欢吃的食物的列表,那么可以用下面的形式进行过滤:

{{ [{
' name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
<!-- 也可以用自定义函数进行过滤(在这个例子中函数定义在$scope上):-->
{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

isCapitalized函数的功能是根据首字母是否为大写返回true或false,具体如下所示:
$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};
我们也可以给filter过滤器传入第二个参数,用来指定预期值同实际值进行比较的方式。
第二个参数可以是以下三种情况之一。
 true

用angular.equals(expected, actual)对两个值进行严格比较。

 false
进行区分大小写的子字符串比较。
 函数
运行这个函数,如果返回真值就接受这个元素。
4. json
json过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助:

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
<!--
{
"name": "Ari",
"City": "San Francisco"
}
-->

5. limitTo
limitTo过滤器会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取。如果传入的长度值大于被操作数组或字符串的长度,那么整个数组或字符串都会被返回。
例如,我们可以截取字符串的前三个字符:
{{ San Francisco is very cloudy | limitTo:3 }}
<!-- San -->
或最后的六个字符:
{{ San Francisco is very cloudy | limitTo:-6 }}
<!-- cloudy -->
对数组也可以进行同样的操作。返回数组的第一个元素:
{{ ['a','b','c','d','e','f'] | limitTo:1 }}
<!-- ["a"] -->
6. lowercase
lowercase过滤器将字符串转为小写。
{{ "San Francisco is very cloudy" | lowercase }}
<!-- san francisco is very cloudy -->

7. number
number过滤器将数字格式化成文本。它的第二个参数是可选的,用来控制小数点后截取的位数。
如果传入了一个非数字字符,会返会空字符串。
{{ 123456789 | number }}
<!-- 1,234,567,890 -->

{{ 1.234567 | number:2 }}
<!-- 1.23 -->
8. orderBy
orderBy过滤器可以用表达式对指定的数组进行排序。
orderBy可以接受两个参数,第一个是必需的,第二个是可选的。
第一个参数是用来确定数组排序方向的谓词。
下面分情况讨论第一个参数的类型。
 函数
当第一个参数是函数时,该函数会被当作待排序对象的getter方法。
 字符串
对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入+或-来强制进行升序或降序排列。
 数组
在排序表达式中使用数组元素作为谓词。对于与表达式结果并不严格相等的每个元素,则使用第一个谓词。第二个参数用来控制排序的方向(是否逆向)。
例如,我们将下面的对象数组用name字段进行排序:

{{ [{
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name' }}
<!--
[
{"name":"Ari","status":"awake"},
{"name":"Nate","status":"awake"},
{"name":"Q","status":"sleeping"}
]
-->
也可以对排序结果进行反转。例如,通过将第二个参数设置为true可以将排序结果进行反转:
{{ [{
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',

'status': 'awake'
}] | orderBy:'name':true }}
<!--
[
{"name":"Q","status":"sleeping"},
{"name":"Nate","status":"awake"},
{"name":"Ari","status":"awake"}
]
-->
9. uppercase
uppercase过滤器可以将字符串转换为大写形式:
{{ "San Francisco is very cloudy" | uppercase }}
<!-- SAN FRANCISCO IS VERY CLOUDY -->

AngularJS提供的内置过滤器的更多相关文章

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

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

  2. AngularJS复习-----内置过滤器和内置服务

    AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...

  3. Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档

    前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...

  4. Hibernate提供的内置标识符生成器

    Hibernate提供的内置标识符生成器 Java语言按内存地址来识别或区分同一个类的不同对象,而关系数据库按主键来识别或区分同一个表的不同记录.Hibernate使用OID(对象标识符)来统一两者之 ...

  5. apache shiro内置过滤器 标签 注解

    内置过滤器 anon(匿名)  org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证)       org.apache.shiro ...

  6. Asp.Net Core MVC框架内置过滤器

    第一部分.MVC框架内置过滤器 下图展示了Asp.Net Core MVC框架默认实现的过滤器的执行顺序: Authorization Filters:身份验证过滤器,处在整个过滤器通道的最顶层.对应 ...

  7. Shiro内置过滤器

    Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum D ...

  8. AngularJS 的那些内置九种过滤器

    ng内置了九种过滤 1. currency (货币处理) 使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币: {{num | currency : ...

  9. angularjs开发常见问题-2(angularjs内置过滤器)

    在angular中内置了几个经常使用的filter,能够简化我们的操作. 过滤器使用 '|' 符号,概念有点相似于linux中的管道. 1.filter (过滤) filter能够依据条件过滤数据.样 ...

随机推荐

  1. python走起之第十三话

    前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒机所具备的功能属性中的其中 ...

  2. 工具网站gallery

    jQuery各个版本齐全的api 在线编辑器codepen

  3. 打包发布WinForm应用程序

    1:新建安装部署项目 打开VS,点击新建项目,选择:其他项目类型->安装与部署->安装向导(安装项目也一样),然后点击确定.(详细见下图) 此主题相关图片如下: 2:安装向导 点击下一步, ...

  4. redux介绍与入门

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...

  5. Ajax form表单提交

    1. 使用 $("form").serialize() 来获取表单数据 $.ajax({ type: 'post', url: 'your url', data: $(" ...

  6. 移动端html模版

    <!DOCTYPE html><html><head> <title>时钟</title> <meta charset="u ...

  7. eclipse: The superclass "javax.servlet.http.HttpServlet" was not found 解决方案

    解决步骤: 1. 安装Tomcat8.5 Server 2. eclipse 新建Tomcat 8.5 Server 3. 配置build path 添加  Server Runtime 1.右键项目 ...

  8. Result Maps collection already contains value for

    Result Maps collection already contains value for select s.id,s.branch_name from t_wx_shop s left jo ...

  9. 配置appium 1.6.3 for MAC

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } 安装 ...

  10. 摸索Tableau

    将本年度第几周转变为对应范围内的某日期 201607 → 2016-02-18 DATEADD('day',7*(int(RIGHT([WEEK_ID],2))-1),DATEPARSE(" ...