AngularJS入门教程之过滤器用法示例_AngularJS

本文实例讲述了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
过滤器
angularjs 示例、angularjs2 hero示例、angularjs 官方示例、angularjs2 示例下载、angularjs 2.0 示例,以便于您获取更多的相关知识。

时间: 2024-09-19 06:31:39

AngularJS入门教程之过滤器用法示例_AngularJS的相关文章

AngularJS入门教程之数据绑定用法示例_AngularJS

本文实例讲述了AngularJS数据绑定用法.分享给大家供大家参考,具体如下: 数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.

AngularJS入门教程之过滤器详解_AngularJS

在这一步你将学习到如何创建自己的显示过滤器. 请重置工作目录: git checkout -f step-9 现在转到一个手机详细信息页面.在上一步,手机详细页面显示"true"或者"false"来说明某个手机是否具有特定的特性.现在我们使用一个定制的过滤器来把那些文本串图形化:√作为"true":以及×作为"false".来让我们看看过滤器代码长什么样子. 步骤8和步骤9之间最重要的不同在下面列出.你可以在GitHub里看到

AngularJS入门教程之控制器详解_AngularJS

AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据.  AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建. AngularJS 实例 <!DOCTYPE html> <html> <head>

AngularJS入门教程之更多模板详解_AngularJS

在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 请重置工作目录: git checkout -f step-8 现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来. 为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板. 步骤7和步骤8之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据 除了phones.json,app/phones/目录也包

AngularJS入门教程之服务(Service)_AngularJS

AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &

AngularJS入门教程引导程序_AngularJS

我们现在开始准备编写AngularJS应用--phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: node scripts/web-s

AngularJS入门教程中SQL实例详解_AngularJS

AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据. 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></s

php中的curl使用入门教程和常见用法实例

[目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件上传 七.文件下载 八.http 验证 九.通过代理发送请求 十.发送json数据 十一.cURL批处理(multi cURL) 十二.总结 起先cURL是做为一种命令行工具设计出来的,比较幸运的是,php也支持cURL了.通过cURL这个利器,我们能在php程序中自由地发送 HTTP请求到某个url来获取

SeaJS入门教程系列之完整示例(三)

 这篇文章主要介绍了SeaJS入门教程系列之完整示例,演示了一个完整的SeaJS开发例子,需要的朋友可以参考下 一个完整的例子 上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件:   1.index.html--主页面. 2.sea.js--SeaJS脚本. 3.init.js--init模块,入口模块,依赖data.jquery.style三个模块.由主页面载入. 4.data.js--data模块,纯json