过滤器可以使用一个管道字符(|)添加到表达式和指令中。
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
表达式中添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.
(下面的两个实例,我们将使用前面章节中提到的 person 控制器)
uppercase 过滤器将字符串格式化为大写:
AngularJS 实例
<
div
ng-app=
"myApp"
ng-controller=
"personCtrl"
>
< p >姓名为 {{ lastName | uppercase }} < /p >
< /div >
< p >姓名为 {{ lastName | uppercase }} < /p >
< /div >
lowercase 过滤器将字符串格式化为小写:
AngularJS 实例
<
div
ng-app=
"myApp"
ng-controller=
"personCtrl"
>
< p >姓名为 {{ lastName | lowercase }} < /p >
< /div >
< p >姓名为 {{ lastName | lowercase }} < /p >
< /div >
currency 过滤器
currency 过滤器将数字格式化为货币格式:
AngularJS 实例
<
div
ng-app=
"myApp"
ng-controller=
"costCtrl"
>
< input type= "number" ng-model= "quantity" >
< input type= "number" ng-model= "price" >
< p >总价 = {{ (quantity * price) | currency }} < /p >
< /div >
< input type= "number" ng-model= "quantity" >
< input type= "number" ng-model= "price" >
< p >总价 = {{ (quantity * price) | currency }} < /p >
< /div >
向指令添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组:
AngularJS 实例
<
div
ng-app=
"myApp"
ng-controller=
"namesCtrl"
>
< ul >
< li ng-repeat= "x in names | orderBy:'country'" >
{{ x.name + ', ' + x.country }}
< /li >
< /ul >
< /div >
< ul >
< li ng-repeat= "x in names | orderBy:'country'" >
{{ x.name + ', ' + x.country }}
< /li >
< /ul >
< /div >
过滤输入
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集:
AngularJS 实例
<
div
ng-app=
"myApp"
ng-controller=
"namesCtrl"
>
< p > < input type= "text" ng-model= "test" > < /p >
< ul >
< li ng-repeat= "x in names | filter:test | orderBy:'country'" >
{{ (x.name | uppercase) + ', ' + x.country }}
< /li >
< /ul >
< /div >
< p > < input type= "text" ng-model= "test" > < /p >
< ul >
< li ng-repeat= "x in names | filter:test | orderBy:'country'" >
{{ (x.name | uppercase) + ', ' + x.country }}
< /li >
< /ul >
< /div >
自定义过滤器
以下实例自定义一个过滤器 reverse,将字符串反转:
AngularJS 实例
var
app
=
angular
.
module
(
'
myApp
'
,
[
]
)
;
app
.
controller
(
'
myCtrl
'
,
function
(
$
scope
)
{
$
scope
.
msg
=
"
Runoob
"
;
}
)
;
app
.
filter
(
'
reverse
'
,
function
(
)
{
//
可以注入依赖
return
function
(
text
)
{
return
text
.
split
(
"
"
)
.
reverse
(
)
.
join
(
"
"
)
;
}
}
)
;
笔记列表
1、uppercase,lowercase 大小写转换
{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} // 结果:tank is good
2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化(保留小数)
{{149016.1945000 | number:2}}
4、currency货币格式化
{{ 250 | currency }} // 结果:$250.00 {{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00
5、filter查找
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
// 查找name为iphone的行 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'iphone'} }}
6、limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位 {{"1234567890" | limitTo:-4}} // 从后面开始截取4位
7、orderBy 排序
// 根id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} // 根据id升序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}