AngularJS快速入门指南06:过滤器

简介:

通过管道字符(‘|’),过滤器可以被添加到表达式和指令中。


AngularJS过滤器

  AngularJS过滤器可以被用来转换(格式化)数据:

过滤器 描述
currency 将数字格式化为现金格式。
filter 从一个集合中选择子项。
lowercase 将字符串转换为小写形式。
orderBy 通过一个表达式对集合元素进行排序。
uppercase 将字符串转换为大写形式。

在表达式中添加过滤器

  过滤器可以通过管道字符(‘|’)被添加到表达式。

  接下来的两个示例我们将使用在之前的章节中使用过的person控制器。

  uppercase过滤器用来将给定的字符串转换成大写形式:

<div ng-app="" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

运行

  lowercase过滤器用来将给定的字符串转换成小写形式:

<div ng-app="" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

运行


currency过滤器

  currency过滤器用来将数字格式化为现金格式:

复制代码
<div ng-app="" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>
复制代码

运行


将过滤器添加到指令

  过滤器也可以通过管道字符(‘|’)被添加到指令。

  orderBy过滤器通过表达式对数组进行排序:

复制代码
<div ng-app="" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<div>
复制代码

运行


通过输入进行过滤

  通过在指令中使用管道字符(‘|’),后面紧跟filter加冒号再加上一个模型的名称,可以形成一个输入过滤器,用来根据用户输入的内容对集合进行过滤:

复制代码
<div ng-app="" 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>
复制代码

运行


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/p/4489278.html,如需转载请自行联系原作者

相关文章
|
运维 Linux Apache
Puppet这一强大的自动化运维工具,涵盖其基本概念、安装配置及使用示例
【10月更文挑战第8天】本文介绍了Puppet这一强大的自动化运维工具,涵盖其基本概念、安装配置及使用示例。Puppet通过定义资源状态和关系,确保系统配置始终如一,支持高效管理基础设施。文章详细讲解了Puppet的安装步骤、配置方法及DSL语言示例,帮助读者快速掌握Puppet的使用技巧。
941 2
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的医院门诊预约挂号系统
基于Java+Springboot+Vue开发的医院门诊预约挂号系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的门诊预约挂号管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
455 2
基于Java+Springboot+Vue开发的医院门诊预约挂号系统
|
10月前
|
数据建模 网络安全
阿里云申请SSL证书价格多少钱一年?2025免费版和付费版收费标准
阿里云SSL证书提供免费和付费版本,适合不同需求。付费证书品牌涵盖WoSign、DigiCert、GlobalSign等,类型包括DV(域名验证)、OV(企业验证)和EV(扩展验证),价格从238元/年起,通配符和多域名证书价格更高。新用户享5折起优惠,全系列75折起。免费版由Digicert提供,仅支持单域名,有效期3个月,特殊域名可能无法申请。建议正式环境选用付费证书以确保稳定性与安全性。详情及申请流程可参考阿里云官方文档或控制台操作指引。
8174 0
|
Linux UED iOS开发
|
网络架构
直通网线的标准颜色顺序
【8月更文挑战第5天】
1756 2
直通网线的标准颜色顺序
|
SQL 关系型数据库 MySQL
|
Java API
Java一分钟之-Java日期与时间API:LocalDate, LocalDateTime
【5月更文挑战第13天】Java 8引入`java.time`包,改进日期时间API。`LocalDate`代表日期,`LocalDateTime`包含日期和时间。本文概述两者的基本用法、常见问题及解决策略。创建日期时间使用`of()`和`parse()`,操作日期时间有`plusDays()`、`minusMonths()`等。注意点包括:设置正确的`DateTimeFormatter`,考虑闰年影响,以及在需要时区信息时使用`ZonedDateTime`。正确使用这些类能提升代码质量。
625 3
|
人工智能 自然语言处理 监控
RPA学习第一课 --初识RPA
RPA学习第一课 --初识RPA
10206 3
|
前端开发
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
696 0
|
存储 Java Go
Go 语言切片如何扩容?(全面解析原理和过程)
Go 语言切片如何扩容?(全面解析原理和过程)
849 2