视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
浅析AngularJSFilter用法_AngularJS
2020-11-27 21:47:57 责编:小采
文档


系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧

Filter简介

Filter是用来格式化数据用的。

Filter的基本原型( ‘|' 类似于Linux中的管道模式):

代码如下:
{{ expression | filter }}

Filter可以被链式使用(即连续使用多个filter):

代码如下:
{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多个参数:

代码如下:
{{ expression | filter:argument1:argument2:... }}

AngularJS内建的Filter

AngularJS内建了一些常用的Filter,我们一一来看一下。

currencyFilter(currency):

用途:格式化货币

方法原型:

代码如下:
function(amount, currencySymbol, fractionSize)

用法:

{{ | currency}}
{{ . | currency:'¥'}}
{{ . | currency:'CHY¥':}}
{{ . | currency:undefined:0}}

dateFilter(date):

用途:格式化日期

方法原型:

代码如下:
function(date, format, timezone)

用法:


{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}

filterFilter(filter):

用途:过滤数组

方法原型:

代码如下:
function(array, expression, comparator)

用法1(参数expression使用String):



用法2(参数expression使用function):



用法3(参数expression使用object):



用法4(指定comparator为true或false):



用法5(指定comparator为function):



jsonFilter(json):

方法原型:

代码如下:
function(object, spacing)

用法(将对象格式化成标准的JSON格式):

代码如下:
{{ {name:'Jack', age: 21} | json}}

limitToFilter(limitTo):

方法原型:

代码如下:
function(input, limit)

用法(选取前N个记录):



lowercaseFilter(lowercase)/uppercaseFilter(uppercase):

方法原型:

代码如下:
function(string)

用法:



numberFilter(number):

方法原型:

代码如下:
function(number, fractionSize)

用法:



orderByFilter(orderBy):

方法原型:

代码如下:
function(array, sortPredicate, reverseOrder)

用法:



自定义Filter

和Directive一样,如果内建的Filter不能满足你的需求,你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter:capitalize_as_you_want,该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。

方法原型:

代码如下:
function (input, capitalize_index, specified_char)

完整的示例代码:


 
 
 
 

好了,本篇讲了AngularJS中的Filter,看完这篇后,我们可以利用好Filter非常方便的使数据能按我们的要求进行展示,从而使页面变得更生动。

下载本文
显示全文
专题