Cordova webapp实战开发（七）- AngularJS 过滤器

1、 currency###

currecy过滤器可以将一个数值格式化为货币格式， {{ 123 | currecy }} 将123转化成货币格式

2、 date###

date过滤器能将日期格式化成需要的格式, 默认采用mediumDate格式

{{ today | date:'medium' }} 
{{ today | date:'short' }} 
{{ today | date:'fullDate' }} 
{{ today | date:'longDate' }} 
{{ today | date:'mediumDate' }}
{{ today | date:'shortDate' }} 
{{ today | date:'mediumTime' }}
{{ today | date:'shortTime' }}

// 年份
{{ today | date:'yyyy' }} 
{{ today | date:'yy' }} 
{{ today | date:'y' }} 

// 月份
{{ today | date:'MMMM' }} 
{{ today | date:'MMM' }} 
{{ today | date:'MM' }} 
{{ today | date:'M' }} 

// 日
{{ today | date:'dd' }} 
{{ today | date:'d' }} 
{{ today | date:'EEEE' }} 
{{ today | date:'EEE' }} 

// 小时
{{today | date:'HH'}} 
{{today | date:'H'}} 
{{today | date:'hh'}} 
{{today | date:'h'}} 

// 分钟
{{ today | date:'mm' }} 
{{ today | date:'m' }} 

// 秒数
{{ today | date:'ss' }} 
{{ today | date:'s' }} 
{{ today | date:'.sss' }} 

// 字符
{{ today | date:'a' }} 
{{ today | date:'Z' }} 

//自定义
{{ today | date:'MMMd, y' }} 
{{ today | date:'EEEE, d, M' }} 
{{ today | date:'hh:mm:ss.sss' }}

3、 filter###

filter过滤器可以从给定的数组中选择一个子集，并将其生成一个新数组返回，
filter第一个参数，可以是字符串，对象，或者函数

字符串：
返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加！符号

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter : 'e' }}
结果 

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter : '!e' }}
结果

对象 :
AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串，就会判断是否包含该字符串。
例如：有一个由people对象组成的数组

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
// 将favorite food 为Pizza的过滤出来
结果 ：

函数：
对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。
例如：

// 每一个元素都会执行，isCapitalized函数
{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}


$scope.isCapitalized = function(str) { 
      // toUpperCase()是转换成大写
      // 判断首之母是否大写并返回true,flase
      return str[0] == str[0].toUpperCase();
};

4、 json###

json过滤器可以将一个JSON或JavaScript对象转换成字符串

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}

5、 limitTo###

limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入参数。

{{ San Francisco is very cloudy | limitTo:-2 }}


{{ ['a','b','c','d','e','f'] | limitTo:2 }}

6、 lowercase###

lowercase过滤器将字符串转为小写

{{ "AAA BBB CCC" | lowercase }}

7、 number###

number过滤器将数字格式化成文本，第二个参数可以截取小数点位数

{{ 1.234567 | number:1 }}

8、 orderBy###

orderBy过滤器可以用表达式对指定的数组进行排序，orderBy有两个参数
第一个参数是用来确定数组排序方向的谓词
第二个参数BOOL类型, 用来控制排序的方向（是否逆向）

9、uppercase###

uppercase过滤器将字符串转为大写

{{ " aaa bbb ccc " | lowercase }}

10、自定义过滤器###

例如我们要创建一个自定义过滤器，将传入的字符窜第三个字符变成大写

首先，创建一个模块用以在应用中进行引用

angular.module('myApp.filters', [])
// 定义一个名字为 capitalize 过滤器
.filter('capitalize', function() {
    return function(input) { 
        return input[0].toUpperCase() + input.slice(3);
    }
});

现在，先将句子全部转换成小写，再执行了capitalize过滤器

{{ 'Ginger Loves Dog Treats' | lowercase | capitalize }}
结果 ：

11、表单过滤器###

// novalidate 属性规定当提交表单时不对其进行验证（不用浏览器对表单的默认验证行为）

    Your email
    


// 1. 加上required代表必填项


// 2.验证表单输入文本长度是否大于某个最小值，这里的意思是最小输入5个字符


// 3.验证表单输入文本长度是否大于某个最大值，这里的意思是最多输入5个字符


// 4. 匹配相应的正则表达式


// 5. 邮件类型


// 6. 数字


// 7. URL