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 ...
随机推荐
- 列式存储(三)JFinal DB.tx()事务
上一篇中说道了列式存储中新增表单时后台接收数据问题,在存入数据库时一次插入多条数据,就要用到事务. JFinal中有个封装好的事务应用,用起来非常方便简单. 写法1: Db.tx(new IAtom( ...
- 第一个WPF应用程序
WPF 全称为 Windows Presentation Foundation. 核心特性: WPF使用一种新的XAML(Extensible Application Markup Language) ...
- 配置mysql远程访问权限,大家可能掉过的那些坑~
1 作为互联网技术从业人 或者粗暴点说:作为一个程序猿.测试从业者 如果没掉过一些坑,都不好意思说自己混过技术圈 2 今天重点讲:mysql开启远程访问权限的那些坑- 对于mysql开启远程访 ...
- [整理]PHP/HTML混写的四种方式
PHP作为一款后端语言,为了输出给浏览器让浏览器呈现出来,无可避免的要输出HTML代码,下文介绍下我用过的三种PHP/HTML混编方法 1.单/双引号包围法 这是最初级的方法了,用法就像下面这样 &l ...
- 【mysql】数据库使用的一些规范
一.MySQL存在的问题 优化器对复杂SQL支持不好 对SQL标准支持不好 大规模集群方案不成熟,主要指中间件 ID生成器,全局自增ID 异步逻辑复制,数据安全性问题 Online DDL HA方案不 ...
- [原]openstack-kilo--issue(七):虚拟机怎么通外网,外网怎么ping通虚拟机
=====问题======= 虚拟机可以ping通外网,外网能ping通虚拟机但是收不到reply 这个问题本人遇到有两种情况: 1.安装完整openstack-kilo后,在route中和虚拟机中抓 ...
- 烂泥:学习Nagios(二):Nagios配置
本文由秀依林枫提供友情赞助,首发于烂泥行天下 nagios安装完毕后,我们现在就来配置nagios.有关nagios的安装,可以参考<烂泥:学习Nagios(一):Nagios安装>这篇文 ...
- Linux多进程编程
进程的状态 Linux进程有7种基础状态(两种running算一种),除了traced都可以用$ps命令查看,$ps可以查看的进程状态如下,更多进程状态信息参见Linux Process VS Thr ...
- windows下socket学习(一)
关于socket的文章,园子里面有很多,其实无非就是 WSAStartup.socket.bind.listen.accept.recv.send(服务端),WSAStartup.socket.con ...
- CentOS 6.3下配置LVM(逻辑卷管理)
一.简介 LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵 ...