10008---AngularJS 控制器
2015-12-08 00:47
633 查看
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
((下面的两个实例,我们将使用前面章节中提到的 person 控制器))
uppercase 过滤器将字符串格式化为大写:
lowercase 过滤器将字符串格式化为小写:
orderBy 过滤器根据表达式排列数组:
filter 过滤器从数组中选择一个子集:
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据:过滤器 | 描述 |
---|---|
currency: | 格式化数字为货币格式。 |
filter: | 从数组项中选择一个子集。 |
lowercase: | 格式化字符串为小写。 |
orderBy: | 根据某个表达式排列数组。 |
uppercase: | 格式化字符串为大写。 |
表达式中添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.((下面的两个实例,我们将使用前面章节中提到的 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 过滤器
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>
相关文章推荐
- 10007---AngularJS 控制器
- AngularJS Module方法详解
- AngularJS实现全选反选功能
- Angular 学习笔记——$provider
- AngularJS 插件 ngOnboarding 使用笔记
- 学习 AngularJS (三) module
- 学习 AngularJS (四) directive 指令
- AngularJS学习!
- Angular 学习笔记——factory
- Angular 学习笔记——$interpolateProvide
- AngularJS 简介
- 使用AngularJS实现简单:全选和取消全选功能
- Angular 学习笔记——$interpolate
- 10006---AngularJS 指令
- AngularJs 脏值检查及其相关
- Angular 学习笔记——自定义指令之间的交互
- angularjs 子父controller交互问题
- Angular 学习笔记——拖拽
- 10005---AngularJS 表达式
- 10004---AngularJS--简介