AngularJS Filters
2016-01-04 13:03
501 查看
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
AngularJS 过滤器可用于转换数据:
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.
((下面的两个实例,我们将使用前面章节中提到的 person 控制器))
uppercase 过滤器将字符串格式化为大写:
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{
lastName | uppercase }}</p>
</div>
lowercase 过滤器将字符串格式化为小写:
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{
lastName | lowercase }}</p>
</div>
currency 过滤器将数字格式化为货币格式:
<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 过滤器根据表达式排列数组:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x
in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集:
<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>
AngularJS 过滤器
AngularJS 过滤器可用于转换数据:过滤器 | 描述 |
---|---|
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
表达式中添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.((下面的两个实例,我们将使用前面章节中提到的 person 控制器))
uppercase 过滤器将字符串格式化为大写:
AngularJS 实例
<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{
lastName | uppercase }}</p>
</div>
lowercase 过滤器将字符串格式化为小写:
AngularJS 实例
<div ng-app="myApp" ng-controller="personCtrl"><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>
向指令添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。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>
过滤输入
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。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>
相关文章推荐
- GUI - Web前端开发框架
- 如何优雅地处理前端异常?
- WEB前端开发都应知道的jquery小技巧及jquery三个简写
- 前端开发过程中浏览器版本的两种判定方法
- Bootstrap每天必学之前端开发框架
- 直接拿来用的15个jQuery代码片段
- 10个很棒的jQuery代码片段
- 前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
- 前端开发必须知道的JS之闭包及应用
- 18个非常棒的jQuery代码片段
- 深入解析 ES6 系列(二)
- [前端百科]UI设计师与前端工程师的区别
- 关于APP,原生和H5开发技术的争论
- 编程狂人第三十三期,程序员必读的技术周刊
- 招聘正在进行时,315晚会使用的高科技产品,难道你们不知道嘛<( ̄︶ ̄)↗[GO!]
- 前端开发-学习资料库
- 前端开发文档(参考手册,开源书籍)
- 1.html的基本概念的学习
- angular.js双向数据绑定实现动画特效
- 前端开发工程师必备技能