AngularJS 过滤器

举报
hwJw19 发表于 2021/05/26 14:04:48 2021/05/26
【摘要】 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器可用于转换数据: 过滤器描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 表达式中添加过滤器: 过滤器可...

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

AngularJS 过滤器可用于转换数据:

过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

表达式中添加过滤器:

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.

((下面的两个实例,我们将使用前面章节中提到的 person 控制器))

uppercase 过滤器将字符串格式化为大写:

?
1
2
3
4
5
<div ng-app="myApp" ng-controller="personCtrl">
 
<p>姓名为 {{ lastName | uppercase }}</p>
 
</div>

lowercase 过滤器将字符串格式化为小写:

?
1
2
3
4
5
<div ng-app="myApp" ng-controller="personCtrl">
 
<p>姓名为 {{ lastName | lowercase }}</p>
 
</div>

currency 过滤器:

currency 过滤器将数字格式化为货币格式:

?
1
2
3
4
5
6
7
8
<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>

向指令添加过滤器:

过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组:

?
1
2
3
4
5
6
7
8
9
<div ng-app="myApp" ng-controller="namesCtrl">
 
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
<div>

过滤输入:

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 
<div ng-app="myApp" ng-controller="namesCtrl">
 
<p>输入过滤:</p>
 
<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>
 
<script src="namesController.js"></script>
 
</body>
</html>

 

文章来源: www.cnblogs.com,作者:姜腾腾,版权归原作者所有,如需转载,请联系作者。

原文链接:www.cnblogs.com/jiangtengteng/p/5981917.html

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200