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的过滤器，然后对默认过滤器、自定义过滤器以及混合过滤器统一进了相应的示例说明来加深理解，我们下节再见。
本文转自Jeffcky博客园博客，原文链接：http://www.cnblogs.com/CreateMyself/p/5527465.html，如需转载请自行联系原作者
AngularJS之Filter（二）相关推荐
- angularjs 过滤器filter
在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久.今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter. 在我们开发中经常需要在页 ...
- angularjs ngrepeat filter
angularjs ng-repeat filter演示样例 地址 转载于:https://www.cnblogs.com/mfrbuaa/p/5323755.html
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- 你的第一个AngularJS应用--教程二：基架、建立和測试的工具
介绍 有非常多可用的工具能够帮助你开发AngularJS 应用,那些非常复杂的框架不在我的讨论范围之中,这也是我開始这系列教程的原因. 在第一部分,我们掌握了AngularJS框架的基本结构,开发了第 ...
- angularjs 利用filter进行表单查询及分页查询
页面: <div> <input style="width:90%;margin-left:5px;margin-right:5px;" class=" ...
- AngularJS学习（二）
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量. <h2>AngularJS 数字</h2> <div ng-app=&q ...
- 阿里面试题亿级表合并引发的思考之 SQL Bloom Filter(二）
布隆过滤器在日常开发中常见,但在 SQL 使用中大家肯定会很陌生.详情见我上一篇文章: 阿里面试题亿级表合并引发的思考之 SQL Bloom Filter(一) 首先,我们直接上图,一目了然来看下 B ...
- 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（一）
一. phonegap 性能优化 以及 phonegap + Angularjs +ionic 1.安装包括:nodejs-cordova-ionic,sdk,phonegap等等: 2.怎样吧导航设 ...
最新文章
- dedecms网站文章内容按自定义排序的方法
- java.lang.NoSuchFieldError: deferredExpression
- 【BZOJ4873】[六省联考2017]寿司餐厅（网络流）
- JS加密算法简单分析
- PBRT中的误差舍入管理(浮点运算)
- busybox源码剖析(1)---whoami.c
- jar包上传maven私服出错Cannot deploy artifact from the local repository
- java Process在windows的使用汇总(转)
- How to monitor mongodb replica set using prometheu
- paip.分布式应用系统java c#.net php的建设方案
- “rt.jar is not on its project's build path”
- 深入浅出工厂设计模式
- docucentre s2011默认登录密码
- 线束对插件厂商网站汇总
- 怎样才能成为挑战年薪30W的运维工程师？
- 电子时钟c语言课题介绍,电子时钟开题报告
- 基于IMS的VoLTE业务
- 屌丝网，上线了 哈哈，
- [R语言]1. R语言中R包下载存储位置和安装位置
- Android 9.0 framework 授予安装未知来源应用权限(去掉未知来源弹窗)