1、 currency###
currecy过滤器可以将一个数值格式化为货币格式， {{ 123 | currecy }} 将123转化成货币格式
2、 date###
date过滤器能将日期格式化成需要的格式, 默认采用mediumDate格式
{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->
// 年份
{{ today | date:'yyyy' }} <!-- 2013 -->
{{ today | date:'yy' }} <!-- 13 -->
{{ today | date:'y' }} <!-- 2013 -->
// 月份
{{ 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'}} <!--24小时制数字小时-->
{{today | date:'H'}} <!--一天中的第几个小时-->
{{today | date:'hh'}} <!--12小时制数字小时-->
{{today | date:'h'}} <!--上午或者下午的第几个小时-->
// 分钟
{{ today | date:'mm' }} <!-- 数字分钟 -->
{{ today | date:'m' }} <!-- 一个小时中的第几分钟 -->
// 秒数
{{ today | date:'ss' }} <!-- 数字秒数 -->
{{ today | date:'s' }} <!-- 一分钟内第几秒 -->
{{ today | date:'.sss' }} <!-- 毫秒 -->
// 字符
{{ today | date:'a' }} <!-- AM -->
{{ today | date:'Z' }} <!--- 0700 -->
//自定义
{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->
3、 filter###
filter过滤器可以从给定的数组中选择一个子集，并将其生成一个新数组返回，
filter第一个参数，可以是字符串，对象，或者函数
字符串 ：
返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加！符号
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter : 'e' }}
结果 <!-- ["Lerner","Likes","Eat"] -->
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter : '!e' }}
结果 <!-- ["Ari","To","Pizza"] -->
对象 :
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的过滤出来
结果 ： <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
函数 ：
对每个元素都执行这个函数， 返回非假值的元素会出现在新的数组中并返回。
例如 ：
// 每一个元素都会执行，isCapitalized函数
{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->
$scope.isCapitalized = function(str) {
// toUpperCase()是转换成大写
// 判断首之母是否大写并返回true,flase
return str[0] == str[0].toUpperCase();
};
4、 json###
json过滤器可以将一个JSON或JavaScript对象转换成字符串
{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
<!--{
"name": "Ari",
"City": "San Francisco"}
-->
5、 limitTo###
limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入参数。
{{ San Francisco is very cloudy | limitTo:-2 }}
<!-- dy -->
{{ ['a','b','c','d','e','f'] | limitTo:2 }}
<!-- ["a", "b"] -->
6、 lowercase###
lowercase过滤器将字符串转为小写
{{ "AAA BBB CCC" | lowercase }}
<!-- aaa bbb ccc -->
7、 number###
number过滤器将数字格式化成文本，第二个参数可以截取小数点位数
{{ 1.234567 | number:1 }}
<!-- 1.2 -->
8、 orderBy###
orderBy过滤器可以用表达式对指定的数组进行排序，orderBy有两个参数
第一个参数是用来确定数组排序方向的谓词
第二个参数BOOL类型, 用来控制排序的方向 （是否逆向）
9、uppercase###
uppercase过滤器将字符串转为大写
{{ " aaa bbb ccc " | lowercase }}
<!--AAA BBB CCC-->
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 }}
结果 ： <!-- giNger loves dog treats -->
11、 表单过滤器###
// novalidate 属性规定当提交表单时不对其进行验证（不用浏览器对表单的默认验证行为）
<form name="form" novalidate>
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>
// 1. 加上required代表必填项
<input type="text" required />
// 2.验证表单输入文本长度是否大于某个最小值，这里的意思是最小输入5个字符
<input type="text" ng-minlength="5" />
// 3.验证表单输入文本长度是否大于某个最大值，这里的意思是最多输入5个字符
<input type="text" ng-maxlength="5" />
// 4. 匹配相应的正则表达式
<input type="text" ng-pattern="[a-zA-Z]" />
// 5. 邮件类型
<input type="email" name="email" ng-model="user.email" />
// 6. 数字
<input type="number" name="number" />
// 7. URL
<input type="url" name="url" />
网友评论