Filter作用就是接收一个输入,通过某个规则进行处理,然后给用户返回处理后的结果。AngularJs内置9种过滤器,开发者也可以自定义过滤器。
一、AngularJs 9种内置过滤器
1、filter:选择数组的子集,并且返回一个新的数组.(Selects a subset(子集) of items from array and returns it as a new array).
形式:{{ filter_expression | filter : expression : comparator(可选) : anyPropertyKey(可选)}}
$scope.arr = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}];
{{arr | filter:'o'}} // [{name:"John",phone:"555-1276"}]
{{arr | filter:'N'}} // [{name:'John', phone:'555-1276'}]
2、currency:将数字格式化为货币格式.
形式:{{ currency_expression | currency : symbol(可选) : fractionSize(可选)}}
{{ 12 | currency }} // $ 12.00
{{ 12 | currency:'¥' }} // ¥12.00
{{ 12 | currency:'¥':1}} // ¥12.0
3、number:为一个数字加上千位分割,类似123,456,789。
形式:{{ number_expression | number : fractionSize(可选)}}
{{1223354 | number}} // 1,223,354
{{1223354 | number:3}} // 1,223,354.000
4、date:日期格式化.
形式:{{ date_expression | date : format(可选) : timezone(可选)}}
{{1494404020763 | date}} // May 10, 2017
{{1494404020763 | date:'dd/MM-yyyy'}} // 10/05-2017
5、json:js对象转换为json字符串.
形式:{{ json_expression | json : spacing(可选)}}
<pre>{{ {'name':'value'} | json }}</pre>
//用<pre>标签才能看到json字符串格式
6、lowercase:将字符串格式化为小写.
形式:{{ lowercase_expression | lowercase}}
{{ 'lastName' | uppercase }} // lastname
7、uppercase:将字符串格式化为大写
形式:{{ uppercase_expression | uppercase}}
8、limitTo:限制数组长度或字符串长度
形式:{{ limitTo_expression | limitTo : limit : begin(可选)}}
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.letters = "abcdefghi";
$scope.longNumber = 2345432342;
{{ numbers | limitTo:3 }} // [1,2,3]
{{ letters | limitTo:4 }} // abcd
{{ longNumber | limitTo:5 }} // 23454
9、orderBy:排序
形式:{{ orderBy_expression | orderBy : expression(可选) : reverse(可选) : comparator(可选)}}
注:orderBy过滤器接收一个expression来指定排序规则,可以是一个字符串,表示以该属性名称进行排序;可以是一个函数,按照函数的返回值排序;还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较)
$scope.arr = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}];
{{ arr | orderBy:'phone' }} //按照phone属性值排列,若'-phone',则倒序
//[{"name":"John","phone":"555-1276"},
{"name":"Mike","phone":"555-4321"},
{"name":"Adam","phone":"555-5678"},
{"name":"Juliette","phone":"555-5678"},
{"name":"Julie","phone":"555-8765"},
{"name":"Mary","phone":"800-BIG-MARY"}]
{{ arr | orderBy:'phone':true }} //reverse属性设置为true,则按照phone属性值倒序排列
二、视图模板中Filter的3种语法
{{ expression | filter }} //第1种
{{ expression | filter1 | filter2 | filter3 }} //第2种:filtera的过滤结果可以应用到filterb中。
{{ expression | filter:argument1:argument2:argument3 }} //第3种:filter可以有多个参数。
三、自定义Filter
自定义filter规范:filter的名称必须是有效的angular表达式标识符,如uppercase/orderBy。filter名字不允许特殊字符,如连字符和点是不允许的,可以使用大写(appSubsectionFilter)或者下划线(app_subsection_filter)。
方法:使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。
angular.module('myApp', []).filter('reverse',[function(){
return function(text){//返回一个新的filter函数,这个filter函数将输入值作为第一个参数,第2、3..个参数就是过滤属性.
return text.split('').reverse().join('');
}
}])
{{ 'google' | reverse }} // elgoog
参考:
http://www.cnblogs.com/lvdaba…
http://www.runoob.com/angular…
https://docs.angularjs.org/gu…
http://www.jb51.net/article/8…