本文举例说明了AngularJS过滤器的使用。分享给大家参考,如下:
在前面几节中,我们已经接触到了AngularJS的表达式,它用于向视图输出$scope对象中的文字量或属性值。在输出之前,我们可以通过过滤器获得打印格式的数据。
过滤器的使用非常简单,让我们看看下面的代码:
!DOCTYPE html html ng-app head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/脚本标题tutorial05 _ 1/title/header dy p { ' HELLO WORLD!'|小写}}/p p{{'hello world!'|大写} }/p p { { 3.1415926 | number :2 } }/p p { { 3011 | currency } }/p/body/html两个嵌套大括号是AngularJs的表达式,我们用|字符后跟筛选器名称来调用筛选器。小写、大写、数字和货币是AngularJs的内置过滤器。
小写用于将文本中的字母转换为小写,大写则相反,数字过滤器用于控制数字的格式,货币将数字转换为金额格式。
让我们看看浏览器中的效果:
AngularJs提供的内置过滤功能有限。以下是如何自定义过滤器。
!DOCTYPE html html ng-app=' filterMod ' head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/脚本title tutori l05 _ 2/title/head body p { { 11314 | TOMb } }/pscript var filterMod=angular . mod(' filterMod ',[]);过滤器模块。filter ('tormb ',function($ log){ var tormb=function(input){ var rmnum=['零','一','二','三','四','五','地','七','八var input str=input ';var input tarr=new Array();for(I=0;iinputStr.lengthi ) { var temp=parseInt(输入% 10);input tarr . push(temp);开关(I){ case 0: input tarr . push(10);打破;case 1: input tarr . push(11);打破;case 2: input tarr . push(12);打破;案例3: input tarr . push(13);打破;}输入=输入/10;} InputArr=InputArr . reverse();var输出=' ';for(I=0;iinputArr.lengthI){ output=RMB num[input tarr[I]];}返回输出;}返回toRMB});/script/body/html以上是用户自定义的过滤器,用于将数字转换为人民币大写汉字。
过滤器模块。过滤器(' tormb ',函数($ log).滤波器的定义与控制器类似,是通过AngularJs模块的滤波方法完成的。第一个参数是过滤器的名称,第二个参数是过滤器实现部分,它必须返回一个数据处理函数。
Var toRMB=函数(输入).这部分是数据处理功能。输入是原始输入数据。我们在这个函数中处理输入数据,然后返回处理后的数据。
浏览器中的效果:
注意:这个toRMB过滤器只是作者为了演示用户自定义过滤器的方法而写的。还有很多不足,感兴趣的读者可以自行改进。
AngularJS源代码可以在这里下载。
希望本文对AngularJS编程有所帮助。