AngularJS之Filter（二）
前言
本节我们来讲讲AngularJS中主要的部分之一，那就是过滤器，当从后台获取到的数据呈现到视图上时，此时可能需要对数据进行相应的转换，此时我们可以通过过滤器在不同页面进行不同数据的格式抓换，在AngularJS中有常见默认的过滤器，当然若不满足所需，我们可以自定义过滤器。
AngularJS默认过滤器
列举AngularJS中常见的过滤器，如下：
| 过滤器名称 | 描述 | 例子 |
| currency | money格式化 | {{ p.price | currency}} |
| date | 日期格式化 |
{ p.orderDate | date : “dd MMM yyyy” }} {{ p.orderDate | date : “shortDate” }} |
| json | 将JSON字符串生成一个JSON对象 |
<tr ng-repeat="p in products"> <td colspan="4">{{p | json}}</td> </tr> |
| number | 格式化数值并给出精确度位数 |
{{ p.price | number : 0}} {{ p.price | number : 2}} |
|
uppercase lowercase |
大小写转换 |
{{ p.city | lowercase }} {{ p.state | uppercase }} |
| limitTo | 控制列表渲染数据 | <tr ng-repeat="p in products | limitTo:10"> |
| orderBy | 排序 |
<tr ng-repeat="p in products | orderBy : ‘name’”> For descending order <tr ng-repeat="p in products | orderBy : ‘-name’”> |
默认过滤器示例
我们渲染一个产品列表并将产品名称转换为大写，产品类别小写，以及数量保留两位小数等。
UI
<body ng-controller="FilterCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
产品个数
<span class="label label-primary">{{products.length}}</span>
</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<td>名称</td>
<td>类别</td>
<td>供给日期</td>
<td class="text-right">数量</td>
<td class="text-right">价格</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products | orderBy :'name'">
<td>{{p.name | uppercase}}</td>
<td>{{p.category | lowercase}}</td>
<td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>
<td class="text-right">{{p.quantity | number:2 }}</td>
<td class="text-right">{{p.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
JS
app.controller('FilterCtrl', function ($scope) {
$scope.products = [
{ name: "Sony LED", category: "TV", price: 40000, quantity:10, expiry: 30 },
{ name: "Vivo xplay5", category: "Mobile", price: 35640, quantity: 08, expiry: 21 },
{ name: "LeTv", category: "TV", price: 36000, quantity: 5, expiry: 50 },
{ name: "Iphone 6 plus", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },
{ name: "Galaxy s7 edge", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },
];
$scope.getExpiryDate = function (days) {
var now = new Date();
return now.setDate(now.getDate() + days);
}
});
最后生成如下：
自定义过滤器示例
AngularJS不仅仅支持内部自构建的过滤器，而且还可以自定义过滤器来满足我们所需，若自定义过滤器此时我们需要 通过module.filter来实现，实际上内部是通过FilterProvider来实现。module.filter这个方法有两个参数，一个是需要创建的过滤器的名称，另外一个是创建一个factory函数来使得该自定义过滤器生效或者工作。
接下来我们实现一个自定义过滤器，该过滤器带一个参数，实现了再对照代码就明朗了。如下：
app.filter("properCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();
return (reverse == false ? intermediate[0].toLowerCase() :
intermediate[0].toUpperCase()) + intermediate.substr(1);
} else {
return value;
}
};
});
接下来在视图中将绑定的名称和类别修改成如下：
<td>{{p.name | properCase}}</td>
<td>{{p.category | properCase : false}}</td>
结果如下：
混合过滤器示例
当进行渲染数据时，有可能需要进行多次过滤此时我们就需要创建多个自定义过滤器或者内置过滤器和自定义过滤器混合使用。
我们首先对列表通过name来orderby一下，然后通过自定义过滤器移除前两条数据。
app.filter("skipRec", function () {
return function (data, count) {
if (angular.isArray(data) && angular.isNumber(count)) {
if (count > data.length || count < 1) {
return data;
} else {
return data.slice(count);
}
} else {
return data;
}
}
});
此时视图页面循环列表时我们将修改成如下：
<tr ng-repeat="p in products | orderBy :'name' | skipRec:2">
.......
<tr>
最终我们得到的结果如下：
总结
本节我们学习了AngularJS的过滤器，然后对默认过滤器、自定义过滤器以及混合过滤器统一进了相应的示例说明来加深理解，我们下节再见。
AngularJS之Filter（二）的更多相关文章
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
- angularjs的$filter使用
angularjs的$filter使用 $filter服务可以在js中对数据进行过滤处理,ng有几个内建的filter,其中有一个叫filter的filter,可方便的实现属性的过滤. 详细的API参 ...
- AngularJS的Filter用法详解
上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...
- angularjs ngrepeat filter
angularjs ng-repeat filter演示样例 地址
- AngularJS过滤器filter入门
在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
- 转：AngularJS的Filter用法详解
Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...
- Mastering Web Application Development with AngularJS 读书笔记(二)
第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
随机推荐
- Win 通过修改注册表把CapsLock映射为Rshift
成品: REGEDIT4 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout] "Scancod ...
- ASP.NET中获取Repeater模板列中LinkButton按钮事件中获取ID等
前台页面中: <asp:Repeater ID="repComment" runat="server"> <ItemTe ...
- Oracle解锁与加锁（HR用户为例)
SQL*Plus: Release 9.2.0.4.0 - Production on Tue Jul 14 18:12:38 2009 Copyright (c) 1982, 2002, Ora ...
- 破除Odoo 菜单栏提示 99+
菜单栏提示利用的menu对象的needaction_counter属性,默认只能显示99个 多于99则显示99+ 如果希望显示完整的数字,则需要改动如下两个地方. 一.menu菜单的显示限制: 将第一 ...
- 启动tomcat 报 Could not delete D:/online/.metadata/.plugins/org.eclipse.wst.server.core/tm
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXkAAADkCAIAAADy7sNDAAAgAElEQVR4nO2deVQUV77H6z+haSeTkZ
- python之路 - 爬虫
网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...
- [原创]MySQL innodb_rollback_on_timeout参数对锁的影响
环境:Server version: 5.6.21-log MySQL Community Server (GPL) 前提提要: innodb_rollback_on_timeout是 ...
- 谢欣伦 - OpenDev原创例程 - 串口助手Comm Assist
前一段时间,一位博友发邮件给我.他跟我讲说没太看懂<化繁为简系列原创教程 - 通信专题 - 串口类CxComm的使用>,请我做一个DEMO工程给他.我抽了一天时间编写并上传了一个DEMO工 ...
- asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
- 深圳电信光纤用户必备：简单破解中兴ZXA10 F460光电猫，实现WIFI和自动拨号功能
最近搬家,ADSL转成光纤宽带,下载速度非常给力.原来的ADSL路由器派不上用场,电信的安装人员也给开通了wifi功能,只是wifi无法上网,而且拨号一定需要用电脑连网线进行拨号.以前是直接把拨号账户 ...