AngularJS中的过滤器
欢迎大家指导与讨论 : )
一、前言
AngularJS的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换。而且,过滤器不会修改作用域中的数据本身,即过滤器会保证数据的完整性。这样子能够允许同一份数据在应用中的不同部分以不同形式得以展示。
二、过滤单个数据
自定义的过滤器,如果是用来处理单项数据的话,过滤器的工厂函数所return的实例函数会带有两个参数,分别是value和reverse。value代表当前处理的该项数据的值,reverse用于运行过滤器被颠倒过来使用,当没有被定义时,则返回null给过滤函数
app.filter("myFilter", function(){
return function(value, reverse){
if(angular.isString(value){
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[0].toLowerCase() : intermediate[0].toUpperCase()) + intermediate.substr(1);
})else{
return value;
}
}
})
<li> {{ p.name | myFilter }} </li>
<li> {{ p.name | myFilter:true }} </li> //此处设置了reverse为true
三、过滤数据集合
自定义的过滤器,如果是用来处理数据集合的话,过滤器的工厂函数所return的实例函数会带有两个参数,分别是data和count。value代表当前处理的该项数据集合,count为某个数值,可以用于对集合进行特殊处理,当没有被定义时,则返回null给过滤函数
app.filter("myFilter", 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;
}
}
})
<li ng-repeat="item in items | myFilter:2 ">
四、filter合并
当我们需要把多个的过滤器集合到一个过滤器身上时, 我们需要在工厂函数中的所reuturn的函数中加入对所需要过滤器的依赖,并对前面处理完的数据再继续下一个过滤器的处理
app.filter("filter1", function(){//...})
app.filter("filter2", function(){//...}) app.filter("CompleteFilter", function(){
return function(value, filter1, filter2){
var date = $filter("filter1")(value, count);
return $filter("filter2").(date, othercount);
}
})
<li ng-reapeat="item in items | CompleteFilter:2:5 "></li>
五、其他技巧
1. 替换货币符号 <li>{{ item.price | currency:"¥" }}</li>
2. 指定小数点位数 <li>{{ item.price | number: 0 }}</li>
3. 格式化日期 <li>{{ item.date| date: "dd MMMM yy" }}</li>
4. 指定集合的数量 <li ng-repeate="item in items | limitTo: 5 ">
5. 指定带有特定属性 <li ng-repeate="item in items | filter:{category: 'Fish'} ">
6. 反向排序 <li ng-repeate="item in items | orderBy: '-price' ">
资料参考
《AngularJS高级程序设计》
AngularJS中的过滤器的更多相关文章
- 关于angularjs 中自定义过滤器
包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...
- AngularJS中自定义过滤器
AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- AngularJS中的指令
欢迎大家讨论与指导 : ) 前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- AngularJS的date 过滤器
date 过滤器可以将日期格式化成需要的格式.AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用 mediumDate 格式,下面的例子中展示了这个格式. ·下面是内置的支持 ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
随机推荐
- 【读书笔记】iOS网络-使用Bonjour实现自组织网络
Bonjour就是这样一种技术:设备可以通过它轻松探测并连接到相同网络中的其他设备,整个过程只需要很少的用户参与或是根本就不需要用户参与.该框架提供了众多适合于移动的使用场景,如基于网络的游戏,设备间 ...
- iOS 简单动画 block动画
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UIView * view = [ ...
- samba服务配置
使用yum或者apt-get安装 # yum install samba samba-client samba-swat Samba开发环境配置 Acl权限设置 [不是必须.只要保证web目录的所有 ...
- Android简单加密保护自有图片资源
现在大部分android应用的图片资源,被反编译后就可以直接拿来用,如果不想让自己的图片资源直接被反编译后使用,首先想到的应该是把图片加密.这里笔者抛砖引玉,草草写了一个对图片进行简单加密的方法,希望 ...
- HTML和CSS高级指南——定位详解
本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...
- java中实现定时功能
网上资料: 我们可以使用Timer和TimerTask类在java中实现定时任务,详细说明如下: 1.基础知识java.util.Timer一种线程设施,用于安排以后在后台线程中执行的任务.可安排任务 ...
- [Linux 性能检测工具]VMSTAT
VMSTAT NAME: Vmstat: 报告虚拟内存统计 语法 : vmstat [-a] [-n] [-t] [-S unit] [delay [ count]] ...
- 首先,编写一个类ChongZai,该类中有3个重载的方法void print();其次, 再编写一个主类来测试ChongZai类的功能
//计算器 jisuanqi jsq=new jisuanqi(); System., )); System., , )); System.out.println("2.3和4.5 中最大的 ...
- HDU 4866 Shooting(持久化线段树)
view code//第二道持久化线段树,照着别人的代码慢慢敲,还是有点不理解 #include <iostream> #include <cstdio> #include & ...
- MySQL Database on Azure
在国际版的Microsoft Azure上,MySQL服务是与ClearDB合作运营的.由于ClearDB无法在中国地区提供服务,因此微软中国的研发团队开发了专门面向中国市场的MySQL Databa ...