• 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 过滤器只是笔者为了演示自定义过滤器的方法而编写的,还有很多不足的地方,有兴趣的读者可以自行完善。

  • 相关阅读:
    高性能反射初体验2
    高性能反射初体验1
    HTML解析原理
    QQ邮箱漂流瓶的"变化"~~
    javascript跟随滚动条滚动,onscroll事件的学习
    认识一下window.location.hash
    IE中替换a标签href属性的一个bug
    用css Sprites的时候IE6的一个小bug
    css中如何引入“非常” 字体
    [重温经典]ie6 不支持position:fix的解决方案
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6468902.html
Copyright © 2020-2023  润新知