(参考angular权威指南)
过滤器: 用来格式化需要展示给用户的数据;
使用过滤器的方式:
(1)$scope.name=$filter("lowercase").("Ariarme");
(2)以HTML形式使用过滤器:如果传递参数只要在过滤器名字后面加冒号,有多个参数,可以在每个参数后面都加入冒号;
{{123.456789 | number:2}} 限制小数点的位数-----显示为123.46(四舍五入)
(3)用 | 符号作为分隔符来同时使用多个过滤器;
AngularJS提供的内置过滤器:
currency : 将一个数值格式化为货币格式,用{{123 | currency}} 将123转化成货币格式;
它允许我们自己设置货币符号:如 {{123 | currency : "¥"}} 显示为¥123.00.00;
date: 可以将日期格式化成需要的格式;
内置的支持本地化的日期格式:
{{today | date 'medium'}} Aug 09,2014 9:45:08 AM
{{today | date 'short'}} 8/9/14 9:45AM
{{today | date 'fullDate'}} Thursday,August 09,2014
{{today | date 'longDate'}} August 09,2014
{{today | date 'mediumDate'}} Aug 09,2014
{{today | date 'shorDate'}} 8/9/14
{{today | date 'mediumTime'}} 9:45:08 AM
{{today | date 'shortTime'}} 9:45 AM;
年份格式化:
四位年份:{{today | date 'yyyy’}} 2017
两位年份:{{today | date 'yy‘}} 17
一位年份:{{today | date 'y‘}} 2017
月份格式化:
英文月份:{{taday |date:'MMMM'}} August
英文月份j简写 {{taday |date:'MMM'}} Aug
数字月份:{{taday |date:'MM'}} 08
一个月中第几个月份::{{taday |date:'M'}} 8
日期格式化:
数字日期:{{today | date:'dd'}} 22
一个月中的第几天:{{today | date:'d'}} 22
英文星期: {{today | date:'EEEE'}} Thrusday
英文星期简写:{{today | date:'EEE'}}Thu
小时格式化:
24小时制数字小时:{{today | date:'HH'}} 00
一天中的第几个小时:{{today | date: 'H'}} 0
12小时制数字小时:{{today | date:'hh'}} 12
上午或下午的第几个小时::{{today | date:'h'}} 12
分钟格式化:
数字分钟数:{{today | date : 'mm'}} 05
一个小时的第几分钟:{{today | date : 'm'}} 5
秒数格式化:
数字秒数:{{today | date 'ss'}} 09
一分钟内的第几秒:{{today | date 's'}} 9
毫秒数:{{today | date 'sss'}}
字符格式化:
上下午标示:{{today | date: 'a'}} AM
四位时区标示:{{today | date 'Z'}} 0700
自定义日期格式:
{{today | date:'hh:mm:ss'}} 23:15:40
{{today | date:'yyyy-MM-dd hh:mm:ss'}} 2017 -5-22 23:15:40
filter: 可以从给定数组中选择一个子集,并将其生成一个新数组返回;通常过滤需要进行展示的元素;
参数:第一个参数可以是 字符串、对象、或是一个用来从数字中选择元素的函数;
第二个参数用来指定预期同实际值进行比较的方式;
参数设置为true: 表示用angular.equals(expected,actual)对两个值进行严格比较;
参数设置为false:进行区分大小写的子字符串比较;
参数设置为函数:运行这个函数,如果返回真值就接受这个元素;
json: 可以将一个JSON或JavaScript对象转化成字符串;
limitTo: 过滤器根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入的参数的正负来控制从前面还是从后面开始截取;
lowercase: 过滤器将字符串转化为小写;
uppercase: 过滤器将字符串转化为大写;
number: 将数字格式化成文本,第二个参数可选,用来控制截取小数点的位数,如果传入的是非数字字符,会返回空字符串;
{{123456789 | number}} 1,234,567,890
{{1.23456789 | number:2}} 1.23
orderBy:过滤器可以用表达式对指定的数组进行排序,它接受两个参数,第一个是必须的,第二个是可选的,控制排序的方向,第二个参数设置为true,排序反转;
例如:{{--- | orderBy:'name':true}}
使用+是升序,-是降序;orderBy:'- age';按年龄的降序排列;
自定义过滤器:
自定义过滤器创建是非常容易的,本质上市会把我们输入的内容当作参数传入进去的函数;
列子: angular.module('mainApp',[]).filter('capitlize',function(){
return function(input){
if(input){
return input[0].toUpperCase() + input.slice(1);
}
}
}); //将字符串的一个字母转化为大写的过滤器