AngularJS入门教程之过滤器用法示例  更新时间:2016年11月02日 09:18:24   作者:Rongbo_J   这篇文章主要介绍了AngularJS过滤器用法,结合实例形式简单的分析了AngularJS过滤器的功能及基本用法,并举例说明了自定义过滤器的实现技巧,需要的朋友可以参考下 本文实例讲述了AngularJS过滤器用法。分享给大家供大家参考,具体如下: 在前面几节里我们已经接触过AngularJS的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值。在输出之前我们可以通过过滤器来格式化输出的数据。 过滤器的使用非常简单,我们看一下下面的代码: tutorial05_1 {{“HELLO WORLD!”| lowercase}} {{“hello world!”| uppercase}} {{3.1415926| number:2}} {{3011| currency}} 两个嵌套的大括号即为AngularJs的表达式,我们通过|字符后跟上过滤器名称来调用该过滤器。lowercase,uppercase,number,currency为AngularJs内置的过滤器。 lowercase用来把文本中的字母转换为小写,uppercase和它相反,number过滤器用来控制数字的格式,currency则把数字转换成金额格式。 我们看一下在浏览器中的效果: AngularJs提供的内置过滤器功能很有限,下面介绍如何自定义过滤器。 tutorial05_2 {{11314| toRMB}} 上面是笔者自定义的一个將数字转换成人民币大写汉字的过滤器。 filterMod.filter(“toRMB”,function($log)… 过滤器的定义和控制器类似,我们通过AngularJs模块的filter方法来完成,第一个参数为过滤器的名称,第二个参数为过滤器实现部分,它必须返回一个数据处理函数。 var toRMB = function(input)… 这一部分为数据处理函数,input为原始输入数据,我们在该函数中对输入数据进行处理,然后return 处理过后的数据即可。 在浏览器中效果: 注意:这个toRMB 过滤器只是笔者为了演示自定义过滤器的方法而编写的,还有很多不足的地方,有兴趣的读者可以自行完善。 AngularJS源码可点击此处本站下载。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: AngularJS入门教程之Helloworld示例 AngularJS入门教程之Hello World! AngularJS入门教程之路由机制ngRoute实例分析 AngularJS入门教程之数据绑定原理详解 AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】 AngularJS入门教程之Cookies读写操作示例 AngularJS入门教程之多视图切换用法示例 AngularJS入门教程之模块化操作用法示例 AngularJS入门教程之MVC架构实例分析 AngularJs入门教程之环境搭建+创建应用示例 AngularJS入门教程之REST和定制服务详解 AngularJS入门示例之Hello World详解 AngularJS 过滤器 相关文章 angular-cli修改端口号【angular2】 本篇文章主要介绍了angular2中angular-cli修改端口号的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧 2017-04-04 angular源码学习第一篇 setupModuleLoader方法 这篇文章主要介绍了angular源码学习第一篇,setupModuleLoader方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-10-10 angular使用post、get向后台传参的问题实例 本篇文章主要介绍了angular使用post、get向后台传参的问题实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 AngularJs E2E Testing 详解 本文主要介绍AngularJs E2E Testing的资料,这里整理了详细的资料,及简单代码示例,有兴趣的小伙伴可以参考下 2016-09-09 AngularJS基础 ng-submit 指令简单示例 本文主要介绍AngularJS ng-submit 指令,这里对ng-submit 指令的基础资料做了详细介绍整理,并附有代码示例,有需要的小伙伴可以参考下 2016-08-08 angular 组件通信的几种实现方式 这篇文章主要介绍了angular 组件通信的几种实现方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 Angular.js去除页面中显示的空行方法示例 这篇文章主要介绍了Angular.js去除页面中显示的空行方法,文中给出了详细的示例代码供大家参考学习,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。 2017-03-03 基于AngularJS实现页面滚动到底自动加载数据的功能 本文主要给大家介绍基于AngularJS实现页面滚动到底自动加载数据的功能,通过第三方控件来实现,感兴趣的朋友跟着小编一起看看具体实现代码吧 2015-10-10 Angular中的Promise对象($q介绍) 这篇文章主要介绍了Angular中的Promise对象($q介绍),本文讲解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等内容,需要的朋友可以参考下 2015-03-03 AngularJS $on、$emit和$broadcast的使用 本文主要介绍AngularJS $on、$emit和$broadcast的使用,这里整理了详细的资料及简单示例代码有兴趣的小伙伴可以参考下 2016-09-09 最新评论

本文实例讲述了AngularJS过滤器用法。分享给大家供大家参考,具体如下:

在前面几节里我们已经接触过AngularJS的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值。在输出之前我们可以通过过滤器来格式化输出的数据。

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

<!DOCTYPE html>
<html ng-app>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial05_1</title>
</head>
<body>
 <p>{{"HELLO WORLD!"| lowercase}}</p>
 <p>{{"hello world!"| uppercase}}</p>
 <p>{{3.1415926| number:2}}</p>
 <p>{{3011| currency}}</p>
</body>
</html>

两个嵌套的大括号即为AngularJs的表达式,我们通过|字符后跟上过滤器名称来调用该过滤器。lowercase,uppercase,number,currency为AngularJs内置的过滤器。

lowercase用来把文本中的字母转换为小写,uppercase和它相反,number过滤器用来控制数字的格式,currency则把数字转换成金额格式。

我们看一下在浏览器中的效果:

AngularJs提供的内置过滤器功能很有限,下面介绍如何自定义过滤器。

<!DOCTYPE html>
<html ng-app="filterMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial05_2</title>
</head>
<body>
 <p>{{11314| toRMB}}</p>
<script>
 var filterMod = angular.module("filterMod",[]);
 filterMod.filter("toRMB",function($log)
 {
  var toRMB = function(input)
  {
   var RMBNum = ['零',"壹","贰","叁","肆","伍","陆","柒","捌","玖","拾","佰","仟","万","亿"];
   var inputStr = input + "";
   var inputArr = new Array();
   for(i=0;i<inputStr.length;i++)
   {
    var temp = parseInt(input % 10);
    inputArr.push(temp);
    switch(i)
    {
     case 0:inputArr.push(10);
      break;
     case 1:inputArr.push(11);
      break;
     case 2:inputArr.push(12);
      break;
     case 3:inputArr.push(13);
      break;
    }
    input = input / 10;
   }
   inputArr = inputArr.reverse();
   var output = "";
   for(i=0;i<inputArr.length;i++)
   {
    output += RMBNum[inputArr[i]];
   }
   return output;
  }
  return toRMB;
 });
</script>
</body>
</html>

上面是笔者自定义的一个將数字转换成人民币大写汉字的过滤器。

filterMod.filter("toRMB",function($log)...

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

var toRMB = function(input)...

这一部分为数据处理函数,input为原始输入数据,我们在该函数中对输入数据进行处理,然后return 处理过后的数据即可。

在浏览器中效果:

注意:这个toRMB 过滤器只是笔者为了演示自定义过滤器的方法而编写的,还有很多不足的地方,有兴趣的读者可以自行完善。

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • AngularJS入门教程之Helloworld示例
  • AngularJS入门教程之Hello World!
  • AngularJS入门教程之路由机制ngRoute实例分析
  • AngularJS入门教程之数据绑定原理详解
  • AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
  • AngularJS入门教程之Cookies读写操作示例
  • AngularJS入门教程之多视图切换用法示例
  • AngularJS入门教程之模块化操作用法示例
  • AngularJS入门教程之MVC架构实例分析
  • AngularJs入门教程之环境搭建+创建应用示例
  • AngularJS入门教程之REST和定制服务详解
  • AngularJS入门示例之Hello World详解
张贴在3