过滤器 Filter
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上。
过滤器通常是伴随标记来使用的,将你model中的数据格式化为需要的格式。
表单的控制功能主要涉及到数据验证以及表单控件的增强。关于表单控件会单独模块做讲解。
内置过滤器
先说angular自带的几种过滤器
1.currency (货币处理)
使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:
{{num | currency : '¥'}}
2.date (日期格式化)
原生的js对日期的格式化能力有限,angular提供的date过滤器基本可以满足一般的格式化要求。用法如下:
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}} date格式可设定
参数用来指定所要的格式, y年 M月 d日 h时 m分 s秒 E星期,你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。
3.filter(匹配字符串)
这个filter用来处理一个数组,然后可以过滤出含有某个字符串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义过滤元素的匹配规则。
例子如下:
$scope.demandArray = [ {name:'lmc',age:23},{name:'lzx',age:24},{name:'lxy',{name:'lyj',age:26},{name:'fll',age:25} ]; $scope.func = function(e){return e.age>24;}; {{ demandArray | filter : 'a' }} //匹配属性值中含有a的 {{ demandArray | filter : 4 }} //匹配属性值中含有4的 {{ demandArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的 {{ demandArray | filter : func }} //参数是函数,指定返回age>4的
4.json(格式化json对象)
json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它 可以用来进行调试,或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:
{{ jsonTest | json}}
5.limitTo(限制数组长度或字符串长度)
limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值,则从数组尾部开始截取。注意这个filter只能从数组或字符串的开头/尾部进行截取。
用处不是很大。。完全可以用js来完成。
{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项
6.lowercase(小写)
把数据转化为全部小写。没有参数,只能把整个字符串变为小写,不能指定字母。7.uppercase(大写)
把数据转化为全部大写。没有参数,只能把整个字符串变为小写,不能指定字母。8.number(格式化数字)
number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定float类型保留几位小数:
{{ num | number : 2 }}
9.orderBy(排序)
orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是 一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),还是拿上面的孩子数组举例:
<div>{{ demandArray | orderBy : 'age' }}</div> //按age属性值进行排序,若是-age,则倒序 <div>{{ demandArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序 <div>{{ demandArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序
自定义过滤器
filter的自定义方式也很简单,使用module的filter方法,返回一个函数,该函数接收
输入值,并返回处理后的结果。
下面看一个给数字加百分比的一个自定义filter:
angular.module("MetronicApp").filter("numberToRMB",["$filter",function($filter) { return function (value) { var filter = $filter("currency"); return filter(value,"¥"); } }])
格式就是这样,你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数,参数就定义在return的那个函数中,作为第二个参数,或者更多个参数也可以。
更多自定义filter会在项目中详细讲解。
使用方法
1.在模板中使用filter
我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:
{{ expression | filter }}
也可以多个filter连用,上一个filter的输出将作为下一个filter的输入:
{{ expression | filter1 | filter2 | ... }}
filter可以接收参数,参数用 : 进行分割,如下:
{{ expression | filter:argument1:argument2:... }}
除了对
{{}}
中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:
<span ng-repeat="a in array | filter ">
2.在controller和service中使用filter
我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:
app.controller('testC',function($scope,currencyFilter){ $scope.num = currencyFilter(123534); }
在模板中使用{{num}}就可以直接输出$123,534.00了。
在服务中使用filter也是同样的道理。
如果你要在controller中使用多个filter,并不需要一个一个注入,angular提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了,使用方法如下:
app.controller('testC',$filter){ $scope.num = $filter('currency')(123534); $scope.date = $filter('date')(new Date()); }
可以达到同样的效果。好处是你可以方便使用不同的filter了。
项目中会对使用到的filter做详细讲解。