filter时angular开发经常接触的一个内容,今天在wiki中做一个补全,说一下filter的使用
首先,filter分为angularJS中封装好的filter和自定义filter
自定义的filter包括以下:
1.currency(货币处理),默认是美元符号
{{num | currency : '¥'}}
2.date(日期格式化)
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
参数用来指定所要的格式,y M d h m s E 分别表示 年 月 日 时 分 秒 星期,你可以自由组合它们
- filter(匹配子串) {{ childrenArray | filter : 4 }} //匹配属性值中含有4的
4.json(格式化Json对象)
{{ jsonTest | json}}
5.limitTo(限制数组长度或字符串长度)
{{ childrenArray | limitTo : 2 }}//将会显示数组中的前两项
- lowercase(小写) {{name | lowercase}}
7.uppercase(大写)
{{name | uppercase}}
8.number(格式化数字)
number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定小float类型保留几位小数:
苦于在js里频繁使用toFixed()的同事得救了
9.orderBy(排序)
{{ childrenArray | orderBy : 'age' }}//按age属性值进行排序
封装好的几种中,主要排序,限制长度和日期格式化以及保留小数位比较有用,其余在遇到特定需求的时候,我们可能要自定义过滤器
filter的使用
过滤器在Html中的使用就是标准的表达式后面+ | +filter的名字
比如{{ name | filter}}使用一个filter
或者{{name | filter1 | filter2 | filter3 }}使用多个filter,前一个filter的输出是下一个filter的输入
再或者{{ expression | filter:argument1:argument2:... }} argument1,argument2到argumentN都是filter的参数,这种是为filter传参数
自定义filter
首先要说明,filter是不需要注入到controller中的,就像function一样,可以全局使用
然后用一个例子来说明自定义filter
自定义两个filter如下:
angular.module('starter').filter('dealer',function(){ //将对象数组中每一项的name变为john加编号,编号为从0到数组长度减1,然后将处理后的数组返回 return function(inputArray){ for(var i=0;i<inputArray.length;i++){ inputArray[i].name="John"+i; } return inputArray; } }); angular.module('starter').filter('littledealer',function(){//将改参数截取到只保留前两位并返回 return function(param){ var a = param.substring(0,2); return a; } });
在controller中,有数组如下:
$scope.items=[ { name:"sss", age:"123" }, { name:"sdd", age:"131" }, { name:"acs", age:"143" }, { name:"scx", age:"135" }, { name:"768", age:"asd" } ];
在html中,我们把数组循环显示出每项的name字段和age字段,然后用filter过滤一下,html中代码如下:
<ion-view view-title="Dashboard"> <ion-content class="padding"> <div style="width: 100%;height: 40px;text-align: center;background-color: transparent;margin-top: 20px;" ng-repeat="x in items | dealer"> <label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.name}}</label><br> <label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.age | littledealer}}</label><br> </div> </ion-content> </ion-view>
由于我们将数组中的每个名字都变为john+编号,且其中每项的年龄字段被截取保留了前位,现在结果为:
过滤器在项目开发中会大量用到,良好的filter使用习惯可以提高开发效率