AngularJS-基本过滤器(大小写长度货币时间)

过滤器

可以对输入的值按照指定的方案进行处理后再输出的函数 

大写过滤器uppercase

 转换字符串到大写形式

<!--大写过滤器：{{ uppercase_expression | uppercase}}-->
<h5>{{'LoveyourselfJiuhao' | uppercase}}</h5>

小写过滤器lowercase

转换字符串到小写形式

<!--小写过滤器：{{ lowercase_expression | lowercase}}-->
<h5>{{'LoveyourselfJiuhao' | lowercase}}</h5>

 

长度过滤器limitTo 

创建只包含指定数量元素的新数组或字符串。元素可从源数组或字符串的起点或终点开始取，通过limit来指定值和符号(正或负)

<!-- 长度过滤器limitTo：{{ limitTo_expression | limitTo : limit}} 
limitTo_expression：任意内容
limit：限制的长度
-->
<p>{{'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'|limitTo:20}}...</p>
<div>{{[1,2,3,4,5,6]|limitTo:3}}</div>

 

json过滤器

允许你转换一个JavaScript对象到JSON字符串。

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

 <!--转换一个JavaScript对象到JSON字符串-->   
    <pre>{{ {'name':'乐乐','age':'18'} | json }}</pre>

 

货币过滤器currency

格式化数字为货币形式 (如 $1,234.56)。当提供的不是货币形式时，会使用本地化默认形式

<!-- 货币过滤器currency:{{ currency_expression | currency : symbol:number}} 
currency_expression:任意内容
symbol:输入货币符号
number:要保留的小数位数
-->
{{12345|currency:'￥':4}} 

数字过滤器：number，格式化数字

<!--数字过滤器number：{{ number_expression | number : fractionSize}}
number_expression：任意数字
fractionSize：小数点位数
-->
<h5>{{1234567|number}}</h5>
<h2>{{1234567|number:2}}</h5>
<h5>{{1234567.1234|number:2}}</h5>

 

日期过滤器date

date格式化date到字符串，基于format的要求

format 字符串由以下元素组合而成：

• '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)

  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'")。

<!--日期过滤器date-->
<h5>{{birthday}}</h5>
<h5>{{birthday|date}}</h5>
<h5>{{birthday|date:'yyyy-MM-dd'}}</h5>
<h5>{{birthday|date:'yyyy-MM-dd HH:mm:ss'}}</h5>
<h5>{{birthday|date:'shortDate'}}</h5>