## 内置的过滤器
| 过滤器 | 说明 |
| :----: | :----: |
| currency | 格式化数字为货币格式 |
| date | 格式化时间 |
| filter | 从数组项中选择一个子集 |
| number | 将数字格式化为文本 |
| json | 将JSON或JavaScript对象转换为字符串 |
| limitTo | 根据传入的参数生成一个新的数组或字符串 |
| lowercase | 将字符串转换为小写 |
| uppercase | 将字符串转换为大写 |
| orderBy | 排序 |
**(1) currency**
`currency`过滤器可以将一个数值格式化为货币格式。
实例（5-1.html）：
```
{{ 123 | currency }}
// $123.00
```
我们还可以自己设置货币符号，默认会采用客户端所处区域的货币符号。
```
{{ 123 | currency: '￥' }}
// ￥123.00
```
**(2) date**
`date`过滤器可以将日期格式化成需要的格式。默认会采用`mediumDate`格式。
实例（5-2.html）：
定义一个时间属性：
```
$scope.today = new Date();
```
本地化的日期格式：
```
{{ today | date: 'medium' }} // Feb 4, 2017 11:38:01 AM
{{ today | date:'short' }} // 2/4/17 11:38 AM
{{ today | date:'fullDate' }} // Saturday, February 4, 2017
{{ today | date:'longDate' }} // February 4, 2017
{{ today | date:'mediumDate' }} // Feb 4, 2017
{{ today | date:'shortDate' }} // 2/4/17
{{ today | date:'mediumTime' }} // 11:38:01 AM
{{ today | date:'shortTime' }} // 11:38 AM
```
年份格式化：
```
四位年份：{{ today | date:'yyyy' }} // 2017
两位年份：{{ today | date:'yy' }} // 17
一位年份：{{ today | date:'y' }} // 2017
```
月份格式化：
```
英文月份：{{ today | date:'MMMM' }} // February
英文缩写：{{ today | date:'MMM' }} // Feb
数字月份：{{ today | date:'MM' }} // 02
一年中的第几个月份：{{ today | date:'M' }} // 2
```
日期格式化：
```
数字日期：{{ today | date:'dd' }} // 04
一个月中的第几天：{{ today | date:'d' }} // 4
英文星期：{{ today | date:'EEEE' }} // Saturday
英文缩写：{{ today | date:'EEE' }} // Sat
```
小时格式化：
```
24小时制数字小时：{{ today | date:'HH' }} // 00
一天中的第几个小时：{{ today | date:'H' }} // 0
12小时制数字小时：{{ today | date:'hh' }} // 12
上午或下午的第几个小时：{{ today | date:'h' }} // 12
```
分钟格式化：
```
数字分钟数：{{ today | date:'mm' }} // 40
一个小时中的第几分钟：{{ today | date:'m' }} // 40
```
秒数格式化：
```
数字秒数：{{ today | date:'ss' }} // 41
一分钟内的第几秒：{{ today | date:'s' }} // 41
毫秒数：{{ today | date:'.sss' }} // .440
```
字符格式化：
```
上下午标识：{{ today | date:'a' }} // AM
四位时区标识：{{ today | date:'Z' }} // +0800
```
自定义日期格式：
```
{{ today | date:'yyyy-MM-dd hh:mm:ss' }}
```
**(3) filter**
`filter`过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回。
`filter`过滤器的第一参数可以是字符串、对象或是一个用来从数组中选择元素的函数。
**字符串**
返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加`!`符号即可。
实例（5-3.html）：
```
<div ng-controller="myController">
{{ person.name | filter: 'o' }}
{{ person.name | filter: '!o' }}
</div>
<script>
myApp.controller('myController',
function($scope) {
$scope.person = {
name: ['Tom', 'Lin', 'Bao']
};
});
</script>
// ["Tom","Bao"]
// ["Lin"]
```
**对象**
AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较。如果属性值是字符串就会判断是否包含该字符串。
实例（5-4.html）：
```
<div ng-controller="myController">
{{ person.intro | filter: {'sex': 'girl'} }}
</div>
<script>
myApp.controller('myController',
function($scope) {
$scope.person = {
intro: [{
'name': 'Tom',
'sex': 'boy'
},
{
'name': 'Lin',
'sex': 'girl'
},
{
'name': 'Bao',
'sex': 'boy'
}]
};
});
</script>
// [{"name":"Lin","sex":"girl"}]
```
在上面的例子中，我们使用一个对象作为过滤对象，匹配属性"sex"，且值包含"girl"的元素。
如果我们希望对全部属性都进行比较，可以将`$`当作键名。
实例（5-5.html）：
```
<div ng-controller="myController">
{{ person.intro | filter: {'$': 'o'} }}
</div>
<script>
myApp.controller('myController',
function($scope) {
$scope.person = {
intro: [{
'name': 'Tom',
'sex': girl'
},
{
'name': 'Lin',
'sex': 'girl'
},
{
'name': 'Bao',
'sex': 'boy'
}]
};
});
</script>
// [{"name":"Tom","sex":"girl"},{"name":"Bao","sex":"boy"}]
```
在这里使用`$`符号来对数组的元素的所有属性进行匹配，只要"name"或"sex"属性的值包含字符串`o`，就返回。
**函数**
对每个元素都执行这个函数，返回由非假值组成的新数组。
实例（5-6.html）：
```
<div ng-controller="myController">
{{ num | filter: isBigger }}
</div>
<script>
myApp.controller('myController',
function($scope) {
$scope.num = [1, 5, 8];
$scope.isBigger = function(num) {
return num > 4;
};
});
</script>
// [5, 8]
```
在上面的示例中，只有当元素值大于4时，才会返回。
注意：当filter使用自定义函数时，必须传递一个参数。
`filter`还可以传入第二个参数，用来指定预期值同实际值进行比较的方式：
- true：用angular.equals(expected, actual)对两个值进行严格比较
- false：进行区分大小写的子字符串比较
- 函数：运行这个函数，如果返回真值就接受这个元素
实例（5-7.html）：
```
<div ng-controller="myController">
{{ ["Tom"] | filter: 't' }}
</div>
// ["Tome"]
```
当你添加第二个参数时：
```
<div ng-controller="myController">
{{ ["Tom"] | filter: 't': true }}
</div>
// []
```
可见第一个例子是模糊匹配，而第二个例子中必须是全等才会匹配。
**(4) json**
`json`过滤器可以将一个JSON或JavaScript对象转换成字符串。
实例（5-8.html）：
```
{{ {'name': 'angular'} | json }}
// { "name": "angular" }
```
**(5) limitTo**
`limitTo`过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入的参数的正负值来控制从前面还是从后面开始截取。
实例（5-9.html）：
```
<p>{{ 'angular' | limitTo: 2 }}</p> // an
<p>{{ 'angular' | limitTo: -2 }}</p> // ar
<p>{{ [1, 2] | limitTo: 1 }}</p> // [1]
<p>{{ 'angular' | limitTo: 9 }}</p> // angular
```
注意：如果传入的长度值大于被操作数组或字符串的长度，那么整个数组或字符串都会被返回。
**(6) lowercase**
`lowercase`过滤器将字符串转为小写。
实例：
```
{{ 'Abc' | lowercase }}
// abc
```
**(7) uppercase**
`uppercase`过滤器用来将字符串转换成大写。
实例:
```
{{ 'Abc' | uppercase }}
// ABC
```
**(8) number**
`number`过滤器将数字格式化为文本。它的第二个参数是可选的，用来控制小数点后截取的位数。
实例：
```
{{ 12345678 | number }}
{{ 123.123 | number: 2 }}
// 12,345,678
// 123.12
```
注意：“number:0”表示除掉小数后的数值，保留整数部分。
**(9) orderBy**
`orderBy`过滤器可以用表达式对指定的数组进行排序。
可以接受两个参数，第一个是必需的，第二个是可选的。
第一个参数是用来确定数组排序方向：
- 函数：当第一个参数是函数时，该函数会被当作待排序对象的getter方法
- 字符串：对这个字符串进行解析的结果将决定数组元素的排序方向。可以传入`+`或`-`来强制进行升序或降序排列。
- 数组：
第二个参数用来控制排序的方向（是否逆向）：true/false
实例（5-10.html）：
```
{{ [{'name': 'tom'}, {'name': 'jon'}, {'name': 'ao'}] | orderBy: 'name' }}
// [{"name":"ao"},{"name":"jon"},{"name":"tom"}]
```
还可以是反序：
```
{{ [{'name': 'tom'}, {'name': 'jon'}, {'name': 'ao'}] | orderBy: 'name': true }}
// [{"name":"tom"},{"name":"jon"},{"name":"ao"}]
```
- 前言
- 第一章：AngularJS简介
- 第二章：模块
- 模块的使用
- AngularJS 生命周期
- 第三章：控制器
- 第四章：作用域
- 作用域解析
- $watch和$apply
- $scope的生命周期
- 第五章：过滤器
- 内置的过滤器
- 自定义过滤器
- 第六章：表达式
- 简单的表达式
- 手动解析表达式
- 插值字符串
- 第七章：指令
- 内置指令
- 自定义指令
- 第八章：组件
- 组件的使用
- 组件的生命周期
- 第九章：模板
- 第十章：依赖注入
- 第十一章：表单
- 表单验证
- ngMessages
- 第十二章：MVC模式
- 第十三章：Service服务
- 内置的服务
- 自定义服务
- 第十四章：与服务端交互
- 简单的交互
- 跨域请求
- Angular缓存
- 强大的promise
- 第十五章：路由
- 模板
- 路由使用
- 路由模式
- 路由事件
- $location
- ui.router
- 第十六章：动画
- 入门级动画
- 自定义动画
- $animate API
- $animateCss
- 第十七章：事件
- 第十八章：angular.element
- 第十九章：全局API
- 第二十章：开发技巧及注意点
- AngularJS和IE
- 第二十一章：为Angular2留坑
- 第二十二章：Angular2 简介
- 第二十三章：Angular2 开发环境搭建
- 第二十四章：Angular2 TypeScript
- 第二十五章：Angular2 模块(module)
- 模块的元数据
- 特性模块
- 第二十六章：Angular2 组件(component)
- 组件的元数据
- 组件的样式
- 组件之间的通信
- 生命周期
- DOM操作
- 第二十七章：Angular2 装饰器和元数据
- 元数据
- 装饰器
- 第二十八章：Angular2 表单(form)
- 模板驱动的表单
- 模型驱动的表单
- 自定义验证器
- 第二十九章：Angular2 事件(event)
- 第三十章：Angular2 模板(template)
- 第三十一章：Angular2 指令(directive)
- 常用内置指令
- 结构型指令
- 属性型指令
- 第三十二章：Angular2 数据绑定(data binding)
- 第三十三章：Angular2 依赖注入(injection)
- 第三十四章：Angular2 服务(service)
- 第三十五章：Angular2 路由(route)
- 路由器部件
- 第三十六章：Angular2 HTTP通信
- 第三十七章：Angular2 管道(pipe)
- 内置管道
- 自定义管道
- 第三十八章：Angular2 动画(animate)
- 动画的实现
- 路由动画
- 第三十九章：案例实战
- 附录：源码下载
- 附录：问题及解决方法