【angularJS】过滤器
1.分类:
《1》内置过滤器(见4)
《2》自定义过滤器
2.作用:接收一个输入,通过某个规则进行处理,然后返回处理后的结果
3.应用:
《1》在模板中使用
| 用法 | 说明 |
{{ expression | filter }}
|
直接在{{}}中使用filter,跟在表达式后面用 | 分割 |
{{ expression | filter1 | filter2 | ... }}
|
也可以多个filter连用 上一个filter的输出将作为下一个filter的输入 |
{{ expression | filter:argument1:argument2:... }}
|
filter可以接收参数, 参数用 : 进行分割 |
<span ng-repeat="a in array | filter "> |
在指令中使用filter 先对数组array进行过滤处理,然后再循环输出: |
《2》在controller和service中使用filter
代码:

运行结果:
$123,534.00
Mar 15, 2016
4.内置过滤器详述
|
《1》currency (货币处理)注意:默认是美元符号,要是输入人民币 :{{num | currency : '¥'}} |
|
《2》.date (日期格式化) {{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}y M d h m s E 分别表示 年 月 日 时 分 秒 星期 |
|
《3》filter(匹配子串) 它接收一个参数,用来定义子串的匹配规则。 |
|
《4.》son(格式化json对象) |
|
《5》limitTo(限制数组长度或字符串长度) |
|
《6》lowercase(小写) |
|
《7》uppercase(大写) |
|
《8》number(格式化数字)可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定小float类型保留几位小数 |
|
《9》orderBy(排序) |
例子:

执行结果:
{{arr | filter:4}}-------------------------》3个[{"name":"cindy","age":4}] (解释:匹配属性值含4的)
{{arr | filter:'a'}}------------------------》3个[{"name":"tiantian","age":7},{"name":"tiantian","age":6}] (解释:匹配属性值含a的)
{{ arr | filter : {name : 'i'} }} ---------》3个 [{"name":"kimi","age":3},{"name":"tiantian","age":7},{"name":"tiantian","age":6},{"name":"cindy","age":4}] (解释:参数是对象,匹配name属性中含有i的)
{{arr | filter: func}}----------------------》3个 [{"name":"tiantian","age":7},{"name":"tiantian","age":6}] (解释:参数是函数,指定返回age>4的)
{{arr | limitTo:2}}------------------------》3个 [{"name":"kimi","age":3},{"name":"tiantian","age":7}] (解释:限制数组的长度,显示数组前2项)
{{'welcome' | uppercase}}---------------》3个 WELCOME (解释:大写)
5.自定义过滤器:
解释:使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。
例子:定义日期的过滤器(2016/3/15)
app.filter('mydate',function(){
return function(time){
var oDate=new Date();
oDate.setTime(time);
return oDate.getFullYear()+'/'+(oDate.getMonth()+1)+'/'+oDate.getDate();
};
});
作者:smile.轉角
QQ:493177502
【angularJS】过滤器的更多相关文章
- AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter
今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在 controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...
- AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...
- AngularJS过滤器
1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...
- AngularJS学习之旅—AngularJS 过滤器(七)
1.AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter ...
- AngularJS 1.x系列:AngularJS过滤器(4)
1. AngularJS过滤器(Filter)使用方法 AngularJS中过滤器(Filter)主要功能是格式化数据. AngularJS过滤器使用方法有3种: ◊ 在表达式{{}}中使用 ◊ 在指 ...
- AngularJS过滤器filter入门
在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...
- AngularJS控制器和AngularJS过滤器的学习(3)
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- angularjs过滤器(一)------禁止转载------
如果用代码实现:将new Date()转换为 M/D/YY 00:00 格式. 启用过滤器有两种方式:①在HTML中用"|"启用过滤器.格式为{{$scope.property | ...
- 关于angularjs过滤器的小尝试
最近的项目中用到了angularjs,相比传统的jquery直接操作Dom, 开发web项目,angularjs在操作表格数据时的数据绑定,操作让我不禁直呼过瘾,好方便啊, 从后台接口传一个json过 ...
随机推荐
- 在CentOS下面安装hue时报的错
说明:我的系统为CentOS 7 ,系统自带的python版本为2.7.5. 安装hue时,推荐使用2.7.0以上的版本,可以自己查看自己系统自带的版本 若是版本不对,要升级为2.7的版本,这里不再说 ...
- mvc中查询字符串请求过长
最近在mvc中做导出Excel功能,通过页面把字段id和对应的中文名称通过a标签传给控制器的过程中,总是报错. 1.第一次错误截图 具体解决方案: 可以配置 IIS 服务器以拒绝查询字符串长度大于指定 ...
- Laravel 5.2 二、HTTP路由、创建控制器 与 资源路由
一.HTTP路由 所有路由都定义在 App\Providers\RouteServiceProvider 类载入的 app/Http/routes.php文件中. 1. 基本路由 简单的 Larave ...
- laravel框架详解
一.基础篇 1.概念 Laravel是一个有着美好前景的年轻框架,它的社区充满着活力,同时提供了完整而清晰的文档,而且为快速.安全地开发现代应用提供了必要的功能.2011年,Taylor Otwell ...
- mybatis 中 使用 allowMultiQueries=true
单条的数据进行修改或者插入的时候没问题,但是进行批量操作的时候就会出现错误,是因为没有开启支持批量操作的功能. mybatis支持批量操作 开启批量执行sql的开关,在拼装mysql链接的url时,为 ...
- Python 基于Python实现的ssh兼sftp客户端(下)
基于Python实现的ssh兼sftp客户端 by:授客 QQ:1033553122 otherTools.py #!/usr/bin/env/ python # -*- coding:utf-8 ...
- Nginx 负载均衡4种模式
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/80541464 本文出自[赵彦军的博客] 4 种负载均衡算法 upstream 支持 ...
- Javascript数组系列三之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...
- [20181122]模拟ORA-08103错误.txt
[20181122]模拟ORA-08103错误.txt $ oerr ora 810308103, 00000, "object no longer exists"// *Caus ...
- C#-命名空间(十五)
概念 命名空间的设计目的是提供一种让一组名称与其他名称分隔开的方式 在一个命名空间中声明的类的名称与另一个命名空间中声明的相同的类的名称不冲突 命名空间的定义是有一定的规范,避免引起不必要的麻烦 命名 ...