AngularJS快速入门指南06:过滤器
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table.reference>thead>tr>td, table.reference>tbody>tr>td, table.reference>tfoot>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
div.chapter {
margin: 10px 0px 10px 0px;
padding: 0px;
width: auto;
overflow: hidden;
}
div.chapter div.prev {
width: 50%;
float: left;
text-align: left;
overflow: hidden;
white-space: nowrap;
}
div.chapter div.next {
width: 50%;
float: right;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
-->
通过管道字符(‘|’),过滤器可以被添加到表达式和指令中。
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>
AngularJS快速入门指南06:过滤器的更多相关文章
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南07:Http对象
$http是AngularJS提供的一个服务,用来从远程服务器读取数据. 提供数据 下面的数据由Web服务器提供: { "records": [ { "Name" ...
- AngularJS快速入门指南05:控制器
AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS app ...
- AngularJS快速入门指南01:导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南19:示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南14:数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南08:表格
ng-repeat指令非常适合用来显示表格. 在表格中显示数据 在AngularJS中显示表格非常容易: <div ng-app="myApp" ng-controller= ...
- AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- AngularJS快速入门指南18:Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
随机推荐
- Spring MVC 文件上传
1.form的enctype=”multipart/form-data” 这个是上传文件必须的 2.applicationContext.xml中 <bean id=”multipartReso ...
- ORA-12505 错误解决
在Fedora下安装了Oracle 10gR2,安装完成之后,使用netca创建了监听,创建的时候没有使用默认的LISTENER和1521端口,而是使用了LISTENER_DELL和1522端口,终 ...
- Java关键字总结及详解
Java关键字是Java的保留字,这些保留字不能用来作为常量.变量.类名.方法名及其他一切标识符的名称. 一.基本数据类型 Java中有八种基本数据类型,六种数字类型(四个整数型.六中浮点型),一种字 ...
- Asp.Net MVC4入门指南(2):添加一个控制器
MVC代表: 模型-视图-控制器 .MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据 ...
- 虚拟机VMware新增硬盘无法识别问题
添加硬盘前的硬盘信息 在虚拟机中新增硬盘 添加后发现使用fdisk -l信息不变,新增的硬盘并没有识别,试过重启虚拟机硬盘就会识别出来.如果不想重启则按照如下方法: 先查看/proc/scsi/scs ...
- 教你理解Fragment
定义 Fragment 表示 Activity 中的行为或用户界面部分.我们可以将多个片段组合在一个 Activity 中来构建多窗口UI,以及在多个 Activity 中重复使用某个片段.可以将片段 ...
- POJ 3181 Dollar Dayz DP
f[i][j]=f[i-j][j]+f[i][j-1],结果很大需要高精度. //#pragma comment(linker, "/STACK:1024000000,1024000000& ...
- poi管道流的导入导出
/** * 导入学生信息 * * @param classid * @param uploadFilePath * @return */ public boolean uploadStudentFil ...
- JS 插件使用
1.时间控件的使用 My97DatePicker WdatePicker({ minDate: '%y-%M-{%d}'}) 默认当前日期以后 LoanMessage.LoanAppAgentMode ...
- 【kd-tree】bzoj2850 巧克力王国
分四种情况讨论:a,b>=0 a,b<0 a>=0,b<0 a<0,b>=0 然后每次检验是否进入一个矩形框 或者 是否直接利用这个矩形框的答案 仅仅利用两个对角的 ...