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 ...
随机推荐
- DropDownList怎样动态绑定数据库中的某一条数据
用Ajax动态绑定数据库的数据:点击后台查看代码,编写代码如下 if (!IsPostBack) { using (SnailTechDataContext con = new SnailTechDa ...
- 转载:PuTTY的自动登录设置
转自:http://blog.segmentfault.com/zair/1190000000639516 PuTTY是Windows下非常好用的SSH远程登陆客户端.本文介绍两种自动登录的设置方法. ...
- 通过反射向将EF的实体映射配置加入到实体模型中
public AdminDbContext() : base("MemberDbContext") { //不使用代理创建导航属性,避免WCF序列化错误 Configuration ...
- clone()与clone(true)的区别
clone()方法用于复制一个元素,但是被复制出来的元素不具备复制的功能,如果希望被复制出来的元素也具备复制的功能,需要给clone()方法加上true这个参数,即clone(true). 例如: & ...
- 我为什么选择使用Go语言?
谢孟军:EGO会员.GopherChina组织者.<Go Web编程>一书的作者,专注Golang技术架构.本文来自EGO会员群分享,入群方式见文末 在这里我主要想和大家分享一些Go和我个 ...
- .NET Remoting获取配置通道:
接上文: public static string ChannelManagerUrl { get { retu ...
- c++ 递归斐波那契算法及时间复杂度
#include<iostream> int fib(int n){ ) return n; else ) + fib(n-); } int main(){ ;i<;i++){ st ...
- css控制页面打印(分页、屏蔽不需要打印的对象)
样式: <style media="print"> .Noprint { DISPLAY: none;} .PageNext { ...
- unity3d 游戏插件 溶解特效插件 - Dissolve Shader
unity3d 游戏插件 溶解特效插件 - Dissolve Shader 链接: https://pan.baidu.com/s/1hr7w39U 密码: 3ed2
- 判断是苹果还是安卓app联调
//app苹果联调 function iosReload(){ //window.webkit.messageHandlers.signUpSuccess.postMessage(null); } / ...