转自：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. 【Paper Reading】Bayesian Face Sketch Synthesis

    Contribution: 1) Systematic interpretation to existing face sketch synthesis methods. 2) Bayesian fa ...

  2. keepalived + nginx 实现高可用

    原理 nginx 可以实现负载均衡,但 nginx 自身存在单点故障的问题,这时候最先想到的就是 keepalived,可以解决单点故障的问题 由于没有使用 lvs,所以这里 nginx 之间不存在负 ...

  3. 紫书 例题8-9 UVa 1451 （数形结合）

    这道题用了数形结合, 真的牛逼, 完全想到不到还可以这么做 因为题目求的是平均值, 是总数除以个数, 这个时候就可以联系 到斜率, 也就是说转化为给你一堆点, 让你求两点之间的最大斜率 要做两个处理 ...

  4. C/C++中相对路径与绝对路径以及斜杠与反斜杠的区别

    1 绝对路径与相对路径 绝对路径表示相对容易得多,依次将文件所在盘符文件夹逐级展开就是绝对路径: ofstream infile("E:\\MyDoc\\file.txt", io ...

  5. C++容器（四）：map类型

    map 类型 map是键-值对的集合.map类型通常可以理解为关联数组:可以使用键作为下标来获取一个值,正如内置数组类型一样.而关联的本质在于元素的值与某个特定的键相关联,而非通过元素在数组内的位置来 ...

  6. Java 二进制，八进制，十进制，十六进制转换

    A.十进制转换其他 十进制转成二进制  Integer.toBinaryString(int i) 十进制转成八进制  Integer.toOctalString(int i) 十进制转成十六进制:  ...

  7. 洛谷 P1572 计算分数

    P1572 计算分数 题目描述 Csh被老妈关在家里做分数计算题,但显然他不愿意坐这么多复杂的计算.况且在家门口还有Xxq在等着他去一起看电影.为了尽快地能去陪Xxq看电影,他把剩下的计算题交给了你, ...

  8. php通过shell调用Hadoop的方法

    1.php代码(index.php) <!DOCTYPE html> <html> <!-- <style> body{background-color:re ...

  9. mysql-总结select各子句及其顺序

    顺序:from->where ->group by->having ->order by

  10. bzoj1430: 小猴打架（prufer序列）

    1430: 小猴打架 题目:传送门 简要题意: n只互不相识的猴子打架,打架之后就两两之间连边(表示已经相互认识),只有不认识(朋友的朋友都是朋友)的两只猴子才会打架.最后所有的猴子都会连成一棵树,也 ...