AngularJS的filter过滤器

uppercase|lowercase:大小写转换过滤

json:json格式过滤

date:日期格式过滤

number:数字格式过滤

currency:货币格式过滤

filter:查找

limitTo:字符串对象截取

orderBy:对象排序

1、uppercase,lowercase 大小写转换

1.{{ "lower cap string" | uppercase }}   // 结果:LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // 结果:tank is good
2.$filter('uppercase')()

2、date 格式化

1.{{ date_expression | date : format(可选)}}

2.$filter('date')(date, format)

format值

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
'yyyy': 4位数字的年份(如AD 1 => 0001, AD 2010 => 2010) 
'yy': 2位数字的年份,范围为(00-99)。(如AD 2001 => 01, AD 2010 => 10) 
'y': 1位数字的年份,例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12) 
'dd': 日,范围为(01-31) 
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat) 
'HH': 小时, 范围为(00-23)
'H': 小时 (0-23) 
'hh': am/pm形式的小时, 范围为(01-12)
'h': am/pm形式的小时, (1-12) 
'mm': 分钟,范围为 (00-59)
'm': 分钟 (0-59) 
'ss': 秒, 范围为 (00-59) 
's': 秒 (0-59) 
'.sss' or ',sss': 毫秒,范围为 (000-999) 
'a': am/pm 标记 
'Z': 4 位数字的时区偏移(+符号)(-1200-+1200) 
'ww': ISO-8601 年内的周数 (00-53)
'w': ISO-8601 年内的周数 (0-53)
AngularJS: API: ng/filter/date

 body, td {
 font-family: Tahoma;
 font-size: 10pt;
 }

format字符串也可以是以下预定义的本地化格式之一:
'medium': 等于en_US本地化后的'MMM d, y h:mm:ss a'(如:Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的'M/d/yy h:mm a'(如: 9/3/10 12:05 pm) 
'fullDate': 等于en_US本地化后的'EEEE, MMMM d, y'(如: Friday, September 3, 2010) 
'longDate': 等于en_US本地化后的'MMMM d, y'(如: September 3, 2010) 
'mediumDate': 等于en_US本地化后的'MMM d, y'(如: Sep 3, 2010) 
'shortDate': 等于en_US本地化后的'M/d/yy'(如: 9/3/10) 
'mediumTime': 等于en_US本地化后的'h:mm:ss a'(如: 12:05:08 pm) 
'shortTime': 等于en_US本地化后的'h:mm a'(如: 12:05 pm)

format字符串可以包含固定值。这需要用单引号括起来 (如:"h 'in the morning'")
如果要输出单引号,使序列中使用两个单引号(如:"h 'o''clock'")。

3 数字格式过滤

1.{{ number_expression | number : fractionSize}}

2.$filter('number')(number, fractionSize)

{{158620 | number}}//158,620
{{16.1945000 | number:2}} //16.19

4.currency货币格式化

1.{{ currency_expression | currency : symbol}}

2.$filter('currency')(amount, symbol)

{{ 250 | currency }}            // 结果:$250.00
{{ 250 | currency:"RMB ¥ " }}  // 结果:RMB ¥ 250.00

5.json格式过滤

1.{{ json_expression | json}}

2.$filter('json')(Object)

这个过滤器常用于调试。使用双花括号的绑定会自动转换成JSON。

6.limitTo:字符串对象截取

1.{{ limitTo_expression | limitTo : limit}}

2.$filter('limitTo')(input, limit)

返回的数组或字符串的长度。如果limit数字为正数,从源数组/字符串开始的limit数量的条目会被复制。如果数字为负数,从源数组/字符串结尾的limit 数量的条目会被复制。如果limit超过array.length会被裁剪。长度为limit的新子数组或子串,如果输入数组小于limit,返回长度会小于limit。



        
    
    
Limit {{numbers}} to:

Output numbers: {{ numbers | limitTo:numLimit }}

Limit {{letters}} to:

Output letters: {{ letters | limitTo:letterLimit }}

6.orderBy:对象排序

通过expression来排序指定的array 。 字符串按字母顺序排序,数字按大小排序。注意:如果你发现数字没被正确排序,请确认它们保存的是数字而不是字符串。

1.{{ orderBy_expression | orderBy : expression : reverse}}

2.$filter('orderBy')(array, expression, reverse)

Array 用于排序的数组。
expression :可为下列之一:
function(*)
Function: Getter函数。这个函数的结果可使用<,=,>操作符进行排序。
string: 一个Angular表达式,对一个对象求值来排序,如用'name'来对属性名为'name'序。用可选前缀+或-来确定是正序或倒序 (例如,+name or -name)。
Array.<(function()|string)>
一个函数或字符串声明数组。数组中的第一个声明用于排序,但是当两个条目相等时,会用下一个声明。
reverse(可选)boolean对数组进行反向排序。


Sorting predicate = {{predicate}}; reverse = {{reverse}}

[ unsorted ]
名称 (^) Phone Number Age
{{friend.name}} {{friend.phone}} {{friend.age}}

7.filter:查找

从array中选择一个条目子集,并作为一个新数组返回。

1.{{ filter_expression | filter : expression : comparator}}

2.$filter('filter')(array, expression, comparator)

array 源数组。

expression

string:作为表达式计算的字符串,计算结果作为子串匹配array中的内容。array中包含这个字符串的所有字符串或字符串属性对象会返回。字符串前可以放置!表示相反条件。
Object:一个模式对象,用于过滤array中对象的指定属性。例如{name:"M", phone:"1"} 表示返回数据组中属性name 包含 "M" 和属性 phone 包含 "1"的条目。可以使用特殊属性名 $ (as in {$:"text"}) 来匹配对象中的所有属性。这相当于上面描述的使用string进行的子串简单匹配。
function() Function(value): 一个自定义过滤方法的函数。这个函数被每个array中的元素调用。最终结果为返回true的元素的数组。

comparator

用于检测期望值(来自过滤表达式)和实际值(来自数组中的实际对象)是否匹配的比较器。可以为以下之一:
Function(actual, expected): 这个函数会传入对象值和期望值来比较,如果条目返回true就会被包含在过滤结果中。

true: Function(actual, expected) { return angular.equals(expected, actual)}的便捷写法。它对期望值和实际值进行强比较。

false|undefined: 一个不区分大小写的子串匹配函数的便捷写法。

Search:
名称 Phone
{{friend.name}} {{friend.phone}}

Any:
Name only
Phone only
Equality
名称Phone
{{friendObj.name}} {{friendObj.phone}}

你可能感兴趣的:(AngularJS的filter过滤器)