AngularJS学习笔记（五）过滤器

过滤器

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时提供了方便的途径可以自己创建过滤器。

• 使用方法
  在HTML中的模板绑定符号{{ }}内通过|来调用过滤器。
  代码示例：

//将字符串转化为大写

    
名字 : 
    
Hello {{name|uppercase}}

效果：

image.png

AngularJS内置过滤器

currency

将数值格式化为货币格式。

data

将日期化为需要的格式。为制定使用格式时，默认medium格式。
取当前时间来使用这些格式，当前时间为2017/9/27,15:12。
代码示例1：

    

        
日期：
        
{{date | date:'medium'}}
        
{{date | date:'short'}}
        
{{date | date:'fullDate'}}
        
{{date | date:'longDate'}}
        
{{date | date:'mediumDate'}}
        
{{date | date:'shortDate'}}
        
{{date | date:'mediumTime'}}
        
{{date | date:'shortTime'}}
        
年份：
        
{{year | date:'yyyy'}}
        
{{year | date:'yy'}}
        
{{year | date:'y'}}
        
月份：
        
{{month | date:'MMMM'}}
        
{{month | date:'MMM'}}
        
{{month | date:'MM'}}
        
{{month | date:'M'}}
        
日期：
        
{{day | date:'dd'}}
        
{{day | date:'d'}}
        
{{day | date:'EEEE'}}
        
{{day | date:'EEE'}}
    

效果：

image.png

代码示例2：

    

        
小时：
        
{{hour | date:'HH'}}
        
{{hour | date:'H'}}
        
{{hour | date:'hh'}}
        
{{hour | date:'h'}}
        
分钟
        
{{mimute | date:'mm'}}
        
{{mimute | date:'m'}}
        
秒数：
        
{{second | date:'ss'}}
        
{{second | date:'s'}}
        
{{second | date:'sss'}}
        
字符：
        
{{character | date:'a'}}
        
{{character | date:'Z'}}
        
自定义示例：
        
{{tody | date:'MMMd,y'}}
    

效果：

image.png

json

将一个JSON或者JavaScript对象转换成字符串。

limitTo

根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。

lowercase

将字符串转为小写。

uppercase

将字符串转为大写。

number

将字符串转为文本。它的第二个参数是可选的，用来控制小数点后截取的位数。
使用方法：{{12334.2222 | number:2}}

orderBy

可以用表达式对指定的数组进行排序。

自定义过滤器

使用filter自定义过滤器，代码示例：

    
姓名: {{ msg | reverse }}

效果：

image.png