angularjs过滤器
在项目中时常会碰到这种情况,后台针对属性的设置,有一些需要设置为枚举类型的,而此时我们前端接收到后台response之后需要对这个枚举类型的数据进行再次加工,改成我们需要的显示方式。比如我的系统中存在三种角色,Employee,Guest,Administrator。查看用户信息的时候如果这是针对的这条属性值显示为枚举类型,显然是不友好的。所以需要前端进行数据二次加工。那么angularjs作为一个优秀的前端框架,是怎么实现这个功能的呢? 1.angularjs过滤器angular过滤器提供了一种filter的方式来配置你想要的filter功能,通过一种类似管道的功能来实现filter解析,返回你所要定义的格式数据。angularjs除了自定义的过滤器外还提供了支持用户自定义过滤器的方式。 1.1 angualrjs自定义过滤器自定义过滤器包含,时间格式化,josn格式化处理,大小写处理,排序处理,number处理等九中内置的过滤器:
使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号, 人民币:{{num | currency : '¥'}}
原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。 用法如下:{{date | date : 'yyyy-MM-dd hh:mm:ss'}} 参数用来指定所要的格式 filter(匹配子串) 这个名叫filter的filter用来处理一个数组,然后可以过滤出含有某个子串 的元素,作为一个子数组来返回。 可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数, 用来定义子串的匹配规则。下面 举个例子说明一下参数的用法,我用现在特别火的几个孩子定义了一个数组:
$scope.childrenArray = [ {name:'kimi',age:3},{name:'cindy',age:4},{name:'anglar',{name:'shitou',age:6},{name:'tiantian',age:5} ]; $scope.func = function(e){return e.age>4;} {{ childrenArray | filter : 'a' }} //匹配属性值中含有a的 {{ childrenArray | filter : 4 }} //匹配属性值中含有4的 {{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的 {{childrenArray | filter : func }} //参数是函数,指定返回age>4的 json(格式化json对象) json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢, 我一般也不会在页面上输出一个json串啊,官网说它 可以用来进行调试,嗯,是个不错的选择。 或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单: {{ jsonTest | json}} limitTo(限制数组长度或字符串长度) limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值, 则从数组尾部开始截取。{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项 lowercase(小写) 把数据转化为全部小写 7. uppercase(大写) 同上。 number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数, 可以指定float类型保留几位小数:{{ num | number : 2 }} orderBy(排序) orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串, 表示以该属性名称进行排序。 可以是 一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序 (若按第一项比较的值相等,再按第二项比较), 还是拿上面的孩子数组举例:
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序,若是-age,则倒序 <div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序 <div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序 1.2 自定义过滤器
上面提到了angualrjs提供的内置过滤器,下面我们来说说自定义过滤器怎么实现。如果你看过前面的国际化
你可能就会发现,国际化的定义方式在使用上跟filter是惊人的相似,那么这两个有什么联系呢?对,其实前面说到的
国际化也是依赖于后者说基于filter来实现的,都是通过$translate来实现。
angualrjs提供了一种叫做filter的配置来实现过滤器:
angular.module('user.management',[]) .filter("userRoleFilter",["$translate",function($translate) { var filterfun = function(value) { switch (value) { case "1": return $translate.instant("Administrator"); break; case "2": return $translate.instant("Employee"); break; case "3": return $translate.instant("Guest"); break; } }; return filterfun; }])
在上面我们定义了一个userRoleFilter的过滤器,将值转为其他数据格式,在这里我们依然需要引入translate相关的js文件。
Html的使用
<span>{{item.state|userRoleFilter}}</span>angualrjs的过滤器还是比较好理解,比较容易使用的。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |