Angular学习笔记之angular的$filter服务浅析  更新时间:2016年11月12日 09:12:39   作者:林七七   本文是小编记录的angular学习笔记,通过本文首先给大家介绍了$filter服务,然后介绍下内置filter及filter的简单使用,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧 首先,介绍下$filter服务: 1、$filter是用来进行数据格式化的专用服务; 2、AngularJS内置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy这8个filter; 3、filter可以嵌套使用,用管道符号”|”来分隔(有点像linux); 4、filter可以传递参数; 5、用户可自定义filter。 介绍下内置filter: currency:用于格式化货币,如在数值前自动加上”$”或”¥”之类的。 date:格式化日期,它会提供丰富的日期格式。 json:完成json格式化。 number:如转成两位小数等。 orderBy:进行排序。 filter的简单使用: {{ 1304375948024 | date }} {{ 1304375948024 | date:”MM/dd/yyyy h:mma” }} {{ 1304375948024 | date:”yyyy-MM-dd hh:mm:ss” }} {{ 30 | currency }} 输出: May 3, 2011 05/03/2011 6:39AM 2011-05-03 06:39:08 $30.00 自定义filter: eg: var myModule = angular.module(‘myModule’,[]); myModule.filter(‘myFilter’,function(){ return function(item){ return ‘Hi,’+item; } }); 使用: {{ ‘JennyLin’ | myFilter }} 以上内容比较详细的给大家介绍了angular的$filter服务,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! 您可能感兴趣的文章: AngularJS过滤器filter用法实例分析 AngularJS ng-style中使用filter AngularJS中的过滤器filter用法完全解析 Angularjs中如何使用filterFilter函数过滤 详解AngularJS中的filter过滤器用法 浅析AngularJS Filter用法 详解AngularJS Filter(过滤器)用法 angular filter 相关文章 详解AngularJS 模态对话框 在涉及GUI程序开发的过程中,常常有模态对话框以及非模态对话框的概念。接下来通过本文给大家介绍AngularJS 模态对话框 ,感兴趣的朋友一起学习吧 2016-04-04 详解AngularJS中的表格使用 这篇文章主要介绍了详解AngularJS中的表格使用,作为热门的JavaScript框架,AngularJS中提供的表格功能十分强大,需要的朋友可以参考下 2015-06-06 AngularJS2 与 D3.js集成实现自定义可视化的方法 本篇文章主要介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 详解Angular之constructor和ngOnInit差异及适用场景 这篇文章主要介绍了详解Angular之constructor和ngOnInit差异及适用场景的相关资料,有兴趣的可以了解一下 2017-06-06 浅谈Angular路由复用策略 本篇文章主要介绍了浅谈Angular路由复用策略,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 Angular获取手机验证码实现移动端登录注册功能 最近在使用angular来做项目,功能要求实现一是点击按钮获取验证码,二是点击登录验证表单。之前用jquery来做项目很好做,使用angular怎么实现呢?其实实现代码也很简单的,下面通过实例代码给大家介绍下,需要的朋友参考下吧 2017-05-05 Angular2使用Angular CLI快速搭建工程(一) 这篇文章主要介绍了Angular2使用Angular CLI快速搭建工程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 angularJs中$scope数据序列化的实例 今天小编就为大家分享一篇angularJs中$scope数据序列化的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 Angularjs 自定义服务的三种方式(推荐) angularjs 中可通过三种($provider,$factory,$service)方式自定义服务。这篇文章主要介绍了Angularjs 自定义服务的三种方式,非常不错,需要的朋友可以参考下 2016-08-08 详解angular2如何手动点击特定元素上的点击事件 这篇文章主要介绍了详解angular2如何手动点击特定元素上的点击事件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 最新评论

首先,介绍下$filter服务:

1、$filter是用来进行数据格式化的专用服务;

2、AngularJS内置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy这8个filter;

3、filter可以嵌套使用,用管道符号”|”来分隔(有点像linux);

4、filter可以传递参数;

5、用户可自定义filter。

介绍下内置filter:

currency:用于格式化货币,如在数值前自动加上”$”或”¥”之类的。

date:格式化日期,它会提供丰富的日期格式。

json:完成json格式化。

number:如转成两位小数等。

orderBy:进行排序。

filter的简单使用:

{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy h:mma" }}
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
{{ 30 | currency }}

输出:

May 3, 2011
05/03/2011 6:39AM
2011-05-03 06:39:08
$30.00

自定义filter:

eg:

var myModule = angular.module('myModule',[]);
myModule.filter('myFilter',function(){
return function(item){
return 'Hi,'+item;
}
});

使用: {{ ‘JennyLin’ | myFilter }}

以上内容比较详细的给大家介绍了angular的$filter服务,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

  • AngularJS过滤器filter用法实例分析
  • AngularJS ng-style中使用filter
  • AngularJS中的过滤器filter用法完全解析
  • Angularjs中如何使用filterFilter函数过滤
  • 详解AngularJS中的filter过滤器用法
  • 浅析AngularJS Filter用法
  • 详解AngularJS Filter(过滤器)用法
张贴在3