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-后台运行,可以选择在前台或后台或前后台
一,工程图. 二,代码. AppDelegate.h AppDelegate.m RootViewController.h #import <UIKit/UIKit.h> @interfa ...
- [读书笔记] CSS权威指南2: 结构和层叠
层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示.这个过程的核心是选择器及其相关声明的特殊性,以及继承机制. 特殊性 对于每个规则,用户代理会计算 ...
- Android常用设计模式(二)
Android常用设计模式之观察者模式 观察者设计模式在Android应用中会经常用到,模式原理类似于这样的场景: 用户订报纸,然后在报社登记,报社来统计用户(添加用户),用户也可以取消订阅,报社删除 ...
- 混合使用TFVC和GIT配置库的优化方案
如果要选出最近几年在软件工程领域最热的技术,那毋庸置疑就是git了.作为分布式源代码管理(DVCS)的代表,git以其超快的操作,便捷的分支合并模型和P2P模式的代码分享模式让软件开发团队的很多复杂协 ...
- 使用git的分支功能实现定制功能摘取与组合的想法
前言,这个想法应该是git比较通用的做法,只是我还没用过,所以把自己的想法记录在这里,督促自己以后按这个方式执行. 我们公司现在面临一个问题, 就是客户的定制需求很多,很杂,其中坑爹需求很多. 我还没 ...
- 迪杰斯特拉算法——PAT 1003
本文主要是将我对于我对于迪杰斯特拉算法的理解写出来,同时通过例题来希望能够加深对于算法的理解,其中有错误的地方希望大家指正. 迪杰斯特拉算法 我将这个算法理解成一个局部到整体的算法,这个方法确实越研究 ...
- 每日Scrum(1)
今天又正式开始了第二个冲刺周期,计划七天,主要需要改进的地方包括UI界面,还有一些细节的把握. 今天出现的主要问题有:在讨论UI界面风格的时候,小组内部意见不统一,对UI界面的创作流程不熟悉,以及难度 ...
- 2014.1.23 Discuz论坛迁移+VPS配置手记
虽说这也不是我第一次转移这个论坛了,但毕竟还是第一次自己配置VPS,写点东西记一下 一:关于VPS的配置 1.用TeamViewer连接服务器 这个VPS的IDC自己带有一个远程控制的页面,用浏览器打 ...
- Linux:kill 进程
在使用Linux时,出现端口占用.进程已启动(但处于不可控状态)情况时如何处理? 发现已知端口被占用时,可以使用netstat -apn | grep yourPort 来查看占用该端口的进程的pid ...
- 简析一下SQL Server里面Fast_Forword 和 SRROLL 的区别
这次简单说说游标的分类. 先看看通常游标的语法 DECLARE cursor_name CURSOR [ LOCAL :局部游标,仅在当前会话有效 | GLOBAL : 全局游标,全局有效,可以 ] ...