AangularJS过滤器详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AangularJS过滤器详解相关的知识，希望对你有一定的参考价值。
（参考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);
}
}
}); //将字符串的一个字母转化为大写的过滤器；
以上是关于AangularJS过滤器详解的主要内容，如果未能解决你的问题，请参考以下文章