转自：https://www.cnblogs.com/best/p/6225621.html

二、过滤器

使用过滤器格式化数据，变换数据格式，在模板中使用一个插值变量。语法格式如下：

{{ express | filter:parameter1:p2:p3… | … | …}}

过滤器分了内置过滤器与自定义过滤器，过滤器的调用方式也分了在模板中调用与在函数中调用。

2.1、内置过滤器

常见的内置过滤器有：

1)、currency(货币)

{{123.456 | currency:'￥'}}

2)、number(数字)

{{12.235| number:2}}

3)、uppercase , lowercase(大小写)格式化

{{"Hello"| uppercase}}

4)、json(数据)格式化

{{userObject| json}}

5)、limitTo(截取)格式化，数量限制
{{"StringObject" | limitTo : 3}}

6)、date 日期格式化

{{name | date : 'yyyy-MM-dd hh:mm:ss'}}

'yyyy': 4位数字的年份(如AD 1 => 0001, AD 2010 => 2010) 
'yy': 2位数字的年份，范围为(00-99)。(如AD 2001 => 01, AD 2010 => 10) 
'y': 1位数字的年份，例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12) 
'dd': 日，范围为(01-31) 
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat) 
'HH': 小时, 范围为(00-23)
'H': 小时 (0-23) 
'hh': am/pm形式的小时, 范围为(01-12)
'h': am/pm形式的小时, (1-12) 
'mm': 分钟,范围为 (00-59)
'm': 分钟 (0-59) 
'ss': 秒, 范围为 (00-59) 
's': 秒 (0-59) 
'.sss' or ',sss': 毫秒,范围为 (000-999) 
'a': am/pm 标记 
'Z': 4 位数字的时区偏移(+符号)(-1200-+1200) 
'ww': ISO-8601 年内的周数 (00-53)
'w': ISO-8601 年内的周数 (0-53)

format 字符串也可以是以下预定义的本地化格式之一:
'medium': 等于en_US本地化后的 'MMM d, y h:mm:ss a' (如：Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的 'M/d/yy h:mm a' (如： 9/3/10 12:05 pm) 
'fullDate': 等于en_US本地化后的 'EEEE, MMMM d, y' (如： Friday, September 3, 2010) 
'longDate': 等于en_US本地化后的 'MMMM d, y' (如： September 3, 2010) 
'mediumDate': 等于en_US本地化后的 'MMM d, y' (如： Sep 3, 2010) 
'shortDate': 等于en_US本地化后的 'M/d/yy' (如： 9/3/10) 
'mediumTime': 等于en_US本地化后的 'h:mm:ss a' (如： 12:05:08 pm) 
'shortTime': 等于en_US本地化后的 'h:mm a' (如： 12:05 pm)
format 字符串可以包含固定值。这需要用单引号括起来 (如： "h 'in the morning'")。如果要输出单引号，使序列中使用两个单引号(如： "h 'o''clock'")。

7)、orderBy(排序)格式化

orderBy:'age':reverse
reverse是true表示降序、false表示升序

8)、filter(筛选&过滤)格式化

{{name | filter : 'l' | json}}

2.1.1、在模板中使用过滤器

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>过滤器</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1">

            <p>

                货币：{{money}} ，{{money|currency}} ，{{money|currency:"￥"}}

            </p>

            <p>

                数字：{{money|number:1}} ，{{money | number:1 | currency:"$" }}

            </p>

            <p>

                大写：{{message|uppercase}}

            </p>

            <p>

                小写：{{message|lowercase}}

            </p>

            <p>

                json：{{user | json}}

            </p>

            <p>

                截取：{{message|limitTo:5|uppercase}}

            </p>

            <p>

                日期1：{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}

            </p>

            <p>

                日期2：{{birthday|date:'fullDate'}}

            </p>

            <p>

                排序：{{users|orderBy:'age':true}}

            </p>

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope) {

                $scope.money=1985.678;

                $scope.message="Hello AngularJS!"

                $scope.user={name:"rose",age:18};

                $scope.birthday=new Date();

                $scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];

            });

        </script>

    </body>

</html>

运行结果：

2.1.2、在脚本中调用过滤函数

在函数中调用过滤器的方法是：在控制中添加对的依赖，filter的依赖，filter("过滤函数名称")(被过滤对象,'参数')

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>过滤器</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1">

            {{money}}

            <hr/>

            {{moneyString}}

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope,$filter) {

                $scope.money=1985.897;

                //使用$filter服务查找currency函数，并调用

                $scope.moneyString=$filter("currency")($scope.money,'USD$');

            });

        </script>

    </body>

</html>

运行结果：

2.2、自定义过滤器

示例代码：

<!DOCTYPE html>

<!--指定angular管理的范围-->

<html ng-app="app01">

    <head>

        <meta charset="UTF-8">

        <title>过滤器</title>

    </head>

    <body>

        <!--指定控制器的作用范围-->

        <form ng-controller="Controller1" name="form1">

            <p>

            {{"Hello AngularJS and NodeJS" | cutString:15:'...'}}

            </p>

            <p>

                {{longString}}

            </p>

        </form>

        <!--引入angularjs框架-->

        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //定义模块，指定依赖项为空

            var app01 = angular.module("app01", []);

            //向模块中添加过滤

            //用于裁剪字符，超过长度则截取，添加...

            app01.filter("cutString",function(){

                return function(srcString,length,addString){

                    if(srcString.length<length){

                        return srcString;

                    }

                    return srcString.substring(0,length)+addString;

                }

            });

            //定义控制器，指定控制器的名称，$scope是全局对象

            app01.controller("Controller1", function($scope,$filter) {

                $scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");

            });

        </script>

    </body>

</html>

运行结果：

3.AngularJS-过滤器的更多相关文章

  1. AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

    今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...

  2. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  3. AngularJS过滤器

    1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...

  4. AngularJS学习之旅—AngularJS 过滤器(七)

    1.AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter ...

  5. AngularJS 1.x系列：AngularJS过滤器（4）

    1. AngularJS过滤器(Filter)使用方法 AngularJS中过滤器(Filter)主要功能是格式化数据. AngularJS过滤器使用方法有3种: ◊ 在表达式{{}}中使用 ◊ 在指 ...

  6. AngularJS过滤器filter入门

    在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...

  7. AngularJS控制器和AngularJS过滤器的学习（3）

    前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...

  8. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  9. angularjs过滤器（一）------禁止转载------

    如果用代码实现:将new Date()转换为 M/D/YY 00:00 格式. 启用过滤器有两种方式:①在HTML中用"|"启用过滤器.格式为{{$scope.property | ...

  10. 关于angularjs过滤器的小尝试

    最近的项目中用到了angularjs,相比传统的jquery直接操作Dom, 开发web项目,angularjs在操作表格数据时的数据绑定,操作让我不禁直呼过瘾,好方便啊, 从后台接口传一个json过 ...

随机推荐

  1. Markdown语法简记

    目录 一.标题 1. 六个级别的标题 2. 主.副两级标题 二.根据标题生成文档结构大纲 三.字体 1. 斜体 2. 粗体 3. 倾斜加粗 4. 行首缩进 5. 删除线 四.引用块 五.代码块 1. ...

  2. hibernate N+1

    http://www.cnblogs.com/sy270321/p/4769198.html

  3. 【codeforces 379D】New Year Letter

    [题目链接]:http://codeforces.com/contest/379/problem/D [题意] 让你构造出两个长度分别为n和m的字符串s[1]和s[2] 然后按照连接的规则,顺序连接s ...

  4. SVN学习总结（2）——SVN冲突解决

    在我们用VS进行项目合作开发的过程中,SVN的提交控制是至关重要的,大家不可避免的都遇到过SVN冲突的问题,开发的时候,应该认真学习SVN的知识,减少冲突,集中时间放在开发上. 解决冲突有三种方式: ...

  5. [转载]不唐突的JavaScript的七条准则

    经过多年的开发.教学和编写不唐突的JavaScript, 我发现了下面的一些准则.我希望它们可以帮助你对“为什么这样设计和执行JavaScript比较好”有一点理解.这些规则曾经帮助我更快地交付产品, ...

  6. SpringBoot之通过Maven将项目打包成ROOT.war-yellowcong

    在项目中,我们通过maven的插件,将项目达成war包,然后通过jenkins,自动化部署项目. 核心的maven配置文件,下面这一段pom.xml的配置文件. 将项目打包成ROOT.war < ...

  7. java学习记录笔记--继承，super，Object类

    继承: Java中的继承是单继承的. 1.子类拥有父类的全部属性和方法. 可是属性和方法的修饰符不能使private. 2.能够复用父类的代码. 方法的重写须要满足的条件: a.返回值类型 b.方法名 ...

  8. 漫谈linux之文件IO篇（SSD写性能和机械硬盘差不多，读是4到10倍）

    前同事的文章,觉得写得很清晰,收藏了. http://blog.chinaunix.net/uid-27105712-id-3270102.html 在Linux 开发中,有几个关系到性能的东西,技术 ...

  9. nyoj--1009--So Easy[Ⅰ]（数学）

    So Easy[Ⅰ] 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 给出任意一个三角形的三个边a,b,c. 要求:求出这个三角形的外接圆半径. 输入 输入数据有多组. ...

  10. iOS崩溃日志

    今天看crash report ,有这样两个crash: 调用 stopUpdatingLocation 函数的是一个CLLocationManager 类型的对象,为什么报错的时候会把这个对象转成N ...