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 ...
随机推荐
- MVC WebAPI 三层分布式框架开发
版权声明:本文为博主原创文章,未经博主允许不得转载. 前言:SOA(面向服务的架构)是目前企业应用开发过程中普遍采用的技术,基于MVC WebAPI三层分布式框架开发,以此适用于企业信息系统的业务处理 ...
- struts2 action配置时 method 省略不写 默认执行方法是父类ActionSuppot中的execute()方法
struts2 action配置时 method 省略不写 默认执行方法是父类ActionSuppot中的execute()方法
- 发现IE6的一个BUG,添加受信任站点后,页面无法跳转
最近客户爆了一个问题,说是最近使用我们的系统,一登录浏览器就直接关闭了. 经排查,属于IE6设置受信任站点的问题,受信任站点设置了通配符,如 http://192.168.1.* 这样的格式,而我 ...
- SQL Server连接SQL Server、SQL Server连接ORACLE 链接服务器
夸数据库访问有很多种方式,其中部分用作接口访问,这里要介绍的是MSSQL访问另一台MSSQL,MSSQL访问ORACLE,其它暂不介绍. 1.MSSQL访问另一台MSSQL: a.展开服务器对象--& ...
- 好用的排名函数~ROW_NUMBER(),RANK(),DENSE_RANK() 三兄弟
排名函数三兄弟,一看名字就知道,都是为了排名而生!但是各自有各自的特色!以下一个例子说明问题!(以下栗子没有使用Partition By 的关键字,整个结果集进行排序) RANK 每个值一个排名,同样 ...
- Join的表顺序
在今天的文章里,我想谈下SQL Server里一个非常有趣的话题:在表联接里,把表指定顺序的话是否有意义?每次我进行查询和性能调优的展示时,大家都会问我他们是否应该把联接中的表指定下顺序,是否会帮助查 ...
- Java的SPI机制与简单的示例
一.SPI机制 这里先说下SPI的一个概念,SPI英文为Service Provider Interface单从字面可以理解为Service提供者接口,正如从SPI的名字去理解SPI就是Service ...
- 烂泥:puppet添加带密码的用户
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 前一篇文章,我们介绍了有关puppet3.7的安装与配置,这篇文章我们再来介绍下如何利用puppet添加带密码的用户. 要通过puppet添加带密码的用 ...
- iOS解决隐藏导航栏后,打开照片选择器后导航栏不显示的问题以及更换导航栏背景色
问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...
- 工作中常用的Linux命令:mkdir命令
本文链接:http://www.cnblogs.com/MartinChentf/p/6076075.html (转载请注明出处) 在Linux系统中,mkdir命令用来创建一个目录或一个级联目录. ...