重温AngularJS(五)-- 过滤器

关联目录索引:
重温AngularJS(一)-- 表达式、指令
重温AngularJS(二)-- 模型ng-model指令
重温AngularJS(三)-- Scope(作用域)
重温AngularJS(四)-- 控制器ng-controller
重温AngularJS(五)-- 过滤器
重温AngularJS(六)-- 服务Service
重温AngularJS(七)-- Select(选择框)、表格
重温AngularJS(八)-- 事件
重温AngularJS(九)-- 模块、全局API
重温AngularJS(十)-- 表单、输入验证
重温AngularJS(十一)-- 包含、动画
重温AngularJS(十二)-- 依赖注入(5个核心组件)
重温AngularJS(十三)-- 路由

作者:Zyao89;转载请保留此行,谢谢;


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

通过使用管道,可以便于双向的数据绑定中视图的展现。

过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数。

AngularJS 过滤器

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

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

表达式中添加过滤器

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

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

姓名为 {{ lastName | uppercase }}

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

姓名为 {{ lastName | lowercase }}

currency 过滤器

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

总价 = {{ (quantity * price) | currency }}

向指令添加过滤器

过滤器可以通过一个管道字符 | 和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组:

  • {{ x.name + ', ' + x.country }}

过滤输入

输入过滤器可以通过一个管道字符 | 和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集:

  • {{ (x.name | uppercase) + ', ' + x.country }}

根据input输入的内容,去过滤内容


自定义过滤器

待增加...

你可能感兴趣的:(重温AngularJS(五)-- 过滤器)