AngularJS入门教程过滤器使用的例子

本文阐述了AngularJS滤波器使用。分享给您参考,如下:

在前面的章节中,我们已经感受到AngularJS的表达,它的功能是输出文本或属性值的范围,对象视图。在输出,我们可以格式化输出数据通过一个过滤器。

过滤器的使用非常简单,让我们看看下面的代码:







tutorial05_1


转向你好世界!|小写} }
转向你好世界!|大写} }
{ { 3.1415926 } } |数:2
{ { 3011 } } |货币






两个嵌套的括号AngularJS的表达,我们通过过滤|字符后跟一个名字叫过滤器。小写,大写字母,数字,和货币是AngularJS内置过滤器。

小写是用来将文本中的字母转换成小写字母,大写字母则与小写字母相对。数字筛选器用于控制数字的格式,货币将数字转换为数量格式。

让我们看看浏览器中的效果。



AngularJs提供的内置过滤器的功能是有限的,这里是如何自定义过滤器。







tutorial05_2


{ { 11314 } } |元

无功filtermod = angular.module(filtermod
filtermod.filter(元
{
VaR元=功能(输入)
{
无功rmbnum = {零、一
无功inputstr =输入+ ;
无功inputarr =新的数组();
为(i = 0;i < inputstr.length;i++)
{
VaR温度= parseInt(输入10);
InputArr.push(临时);
开关(一)
{
案例0:inputarr.push(10);
打破;
案例1:inputarr.push(11);
打破;
案例2:inputarr.push(12);
打破;
案例3:inputarr.push(13);
打破;
}
输入=输入 10;
}
inputarr = inputarr.reverse();
var输出 ;
为(i = 0;i < inputarr.length;i++)
{
输出= rmbnum { inputarr {我} };
}
返回输出;
}
返回元;
});





上面是一个过滤器,我自定义将数字转换成汉字人民币。


filtermod.filter(元


滤波器的定义类似于控制器。我们完成它通过AngularJS模块的滤波方法。第一个参数是过滤器的名称,第二个参数是过滤器的实现部分。它必须返回一个数据处理函数。


VaR元=功能(输入)…


这部分是数据处理功能。输入是原始输入数据。我们在这个函数中处理输入数据,然后在返回后处理数据。

浏览器中的效果:



注:这是写元滤波器以作者演示自定义过滤器。还有许多缺点。感兴趣的读者可以提高自己。

AngularJS的源代码可以点击这里下载本站。

希望这篇文章能帮助的AngularJS程序设计。