【AnjularJS系列6 】 过滤器
第六篇,过滤器
AngularJS 过滤器可用于转换数据:
过滤器 | 描述 |
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
1、在模板中使用filter:直接在{{}}中使用filter,在表达式后用|进行分割
A、单一filter
语法:{{ expression | filter }}
示例:<div ng-app="">
<span>lowercase:{{ "JUST Do It"| lowercase }}</span><br />
<span>uppercase:{{ "lower cap string" | uppercase }}</span><br />
<span>currency:{{ "250" | currency }}</span>
</div>
显示结果:lowercase:just do it
uppercase:LOWER CAP STRING
currency:$250.00
B、可以多个filter连用,上一个filter的输出将作为下一个filter的输入
语法:{{ expression | filter1 | filter2 | ... }}
示例:<div ng-app="">
<span>多个过滤器:</span><br />
<span>小数点,货币单位{{ "320"| number:2|currency }}</span><br />
</div>
显示结果:小数点,货币单位$320.00
number先将数字保留两位小数,currency再转换成货币单位,其中,number:2就是以下要说明的带参数的过滤器
C、带参数的过滤器
1) currency :使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号
{{ "123"|currency:'¥' }}
2) number : 可以为一个数字加上千位分割,例如,123,456,789。
同时接收一个参数,可以指定小float类型保留几位小数:
{{ num | number : 2 }}
3) limitTo:limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度。
{{ childrenArray|limitTo:2 }}(childrenArray为已初始化的数组,下文亦是)
4) orderBy :orderBy过滤器可以将一个数组中的元素进行排序,
参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。
还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较)
{{ childrenArray|orderBy:'age'}} OR {{ childrenArray|orderBy:['age','name']}}
D、自定义过滤器:利用filter方法创建过滤器,将表达式作为输入,进行数据处理
1)单一参数
<span>{{childrenArray[0] |getChildName}}</span>
<script type="text/javascript">
var app = angular.module('MyFilter', []);
app.controller('MyFilterCtrl',function($scope) {
$scope.childrenArray = [
{name:'Kimi',age:3},
{name:'Shitou',age:6},
{name:'Anglar',age:4},
{name:'Tiantian',age:5},
{name:'Cindy',age:4}
];
});
app.filter('getChildName',function(){
return function(inputArray){
return inputArray.name+"今年"+inputArray.age+"岁";
}
});
</script>
自定义过滤器
2)多个参数
2、在controller和service中使用filter
【AnjularJS系列6 】 过滤器的更多相关文章
- AnjularJS系列6 —— 过滤器
第六篇,过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. o ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(01过滤器简介)
过滤器 什么是过滤器? 过滤器(Filter) 主要的作用大致可以理解为把我们的附加逻辑注入到MVC框架的请求处理. 在ASP.NET MVC的请求处理中一种有19个管道事件分别是 BeginRequ ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(02授权过滤器)
授权过滤器 概念介绍 在之前的文章中我们已经带大家简单的了解了下过滤器,本次我们开始介绍授权过滤器. 我们之前提到过授权过滤器在认证过滤器之后,其他过滤器和方法被调用之前运行,而授权过滤器和它名字的含 ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(03动作过滤器过滤器)
概念介绍 动作过滤器应该是我们平常工作中需要用到最多的过滤器了,动作过滤器,主要在我们的动作方法执行前后执行. 如果我们需要创建动作过滤器需要实现IActionFilter接口. 我们看到该接口里有两 ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(04认证过滤器过滤器)
概念介绍 认证过滤器是MVC5的新特性,它有一个相对复杂的生命周期,它在其他所有过滤器之前运行,我们可以在认证过滤器中创建一个我们定义的认证方法,也可以结合授权过滤器做一个复杂的认证方法,这个方法可以 ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(05结果过滤器)
概念介绍 结果过滤器看名字就知道这个过滤器是针对方法所产生结果的,结果过滤器,主要在我们的动作方法结果返回前后执行. 如果我们需要创建结果过滤器需要实现IResultFilter接口. namespa ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(06异常过滤器)
概念介绍 异常过滤器主要在我们方法中出现异常的时候触发,一般我们用 异常过滤器 记录日志,或者在产生异常时做友好的处理 如果我们需要创建异常过滤器需要实现IExceptionFilter接口. nam ...
- 设计模式系列之过滤器模式(Chriteria Pattern)
过滤器模式(Filter Pattern)或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来.这种类 ...
随机推荐
- BZOJ 1303: [CQOI2009]中位数图 问题转化_扫描_思维
将比 b 大的设成 1,比 b 小的设成 -1,开个桶左右扫描一下,乘法原理乘一乘就好了. 虽然一眼切,不过这个基于中位数的转化还是相当重要的.middle 那个主席树的题也需要该做法 Code: # ...
- C++基础 (9) 第九天 编译器对模板类的二次编译 类模板 自定义数组类
1 昨日回顾 2 编译器对于模板的二次编译 写一个模板函数 然后进行调用 g++ template.cpp -o template // 汇编 g++ -S template.cpp –o templ ...
- Asp 日期格式化问题 沙比作者,我改过来。
Asp 日期格式化问题 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-06-14我要评论 asp做网站经常遇到日期格式处理问题,介绍一个有用的vbscript函数forma ...
- ApacheBench 测试性能并使用 GnuPlot 绘制图表
转自:http://blog.csdn.net/fdipzone/article/details/18827069 ApacheBench 测试性能并使用 GnuPlot 绘制图表 Apache Be ...
- CF55C. Pie or die
/* CF55C. Pie or die http://codeforces.com/problemset/problem/55/C 博弈论 乱搞 获胜条件是存在一个棋子到边界的值小于5 */ #in ...
- BZOJ 3674 可持久化并查集加强版(路径压缩版本)
/* bzoj 3674: 可持久化并查集加强版 http://www.lydsy.com/JudgeOnline/problem.php?id=3674 用可持久化线段树维护可持久化数组从而实现可持 ...
- MyBatis中动态SQL元素的使用
掌握MyBatis中动态SQL元素的使用 if choose(when,otherwise) trim where set foreach <SQL>和<include> 在应 ...
- BA-siemens-insight-event builder使用
event builder功能主要是用来给report使用的,作为一个独立的对象,这个对象的功能就是收集点位的信息,如果再使用report功能就可以显示或输出点位的信息.
- jdk环境变量设置理解
1.系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0) 2.系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOM ...
- [Windows Server]安装系统显示“缺少计算机所需的介质驱动程序”解决方案
1.把电脑上插着的硬盘拔了 2.重试 3.修复计算机找到dos命令行 4.然后进入我们放置解压了的系统的那个符盘,(我这里放在D盘)输入:d: 找到刚才我们解压了的系统文件,进入sourc ...