Angular.js过滤器(filter)

1.初识Angular.js

2.Angular.js的作用域和数据绑定

在Angular.js里过滤器是用来格式化数据的，过滤器分内置过滤器和自定义过滤器。

绑定数据时在符号 {{}} 内使用 | 来调用过滤器。

让我们来认识下过滤器吧

内置过滤器

1.大小写转换，uppercase、lowercase

{{ "aaaa" | uppercase }} // AAAA
{{ "BBBB" | lowercase }} // bbbb

2.货币格式化，currency

{{123|currency:'￥'}}         // ￥123.00
{{123|currency}}              // $123.00
{{123|currency:'RMB ￥'}}     // RMB ￥123.00 

3.日期格式化，date

{{1427345339072 | date}} // Mar 26, 2015 
{{ 1427345339072 | date:'medium' }} // Mar 26, 2015 12:48:59 PM 
{{ 1427345339072 | date:'short' }} // 3/26/15 12:48 PM
{{ 1427345339072 | date:'fullDate' }} // Thursday, March 26, 2015 
{{ 1427345339072 | date:'longDate' }} // March 26, 2015
{{ 1427345339072 | date:'mediumDate' }} // Mar 26, 2015
{{ 1427345339072 | date:'shortDate' }} // 3/26/15
{{ 1427345339072 | date:'mediumTime' }} // 12:48:59 PM
{{ 1427345339072 | date:'shortTime' }} // 12:48 PM 
四位年份：{{ 1427345339072 | date:'yyyy' }} // 2015
两位年份：{{ 1427345339072 | date:'yy' }} //15 
一位年份：{{ 1427345339072 | date:'y' }} // 2015 

英文月份：{{ 1427345339072 | date:'MMMM' }} // March 
英文月份简写：{{ 1427345339072 | date:'MMM' }} // Mar 
数字月份：{{ 1427345339072 |date:'MM' }} // 03 
一年中的第几个月份：{{ 1427345339072 |date:'M' }} // 3 

数字日期：{{ 1427345339072|date:'dd' }} // 26 
一个月中的第几天：{{ 1427345339072 | date:'d' }} // 26
英文星期：{{ 1427345339072 | date:'EEEE' }} // Thursday 
英文星期简写：{{ 1427345339072 | date:'EEE' }} // Thu 

24小时制数字小时：{{1427345339072|date:'HH'}} // 12
一天中的第几个小时：{{1427345339072|date:'H'}} // 12
12小时制数字小时：{{1427345339072|date:'hh'}} // 12
上午或下午的第几个小时：{{1427345339072|date:'h'}} // 12

数字分钟数：{{ 1427345339072 | date:'mm' }} // 48
一个小时中的第几分钟：{{ 1427345339072 | date:'m' }} // 48 

数字秒数：{{ 1427345339072 | date:'ss' }} // 59 
一分钟内的第几秒：{{ 1427345339072 | date:'s' }} // 59
毫秒数：{{ 1427345339072 | date:'.sss' }} // 0.072 

4.数字格式化，number

{{12.13534|number:2}} // 12.14 四舍五入保留两位小数
{{10000000|number}} // 10,000,000 

5.json格式化

{{ {name: '张三', sex: '男'} | json }}  
// { "name": "张三", "sex": "男" }  json过滤器可以将一个JSON或JavaScript对象转换成字符串。

6. filter查找

 {{ [{"name": "张三","id": 10},  
{"name": "李四","id": 11},  
{"name": "张五","id": 12}  
] | filter:"张"}}                   
// [{"name":"张三","id":10},{"name":"张五","id":12}] 查找含有有张的行  

7.orderBy

{{ [{"name": "张三","id": 15},  
{"name": "李四","id": 11},  
{"name": "张五","id": 12}  
] | orderBy:'id':true}}   // 降序

{{ [{"name": "张三","id": 15},  
{"name": "李四","id": 11},  
{"name": "张五","id": 12}  
] | orderBy:'id'}}          // 升序  

8.limitTo

{{ [{"name": "张三","id": 15},  
{"name": "李四","id": 11},  
{"name": "张五","id": 12}  
] | limitTo:1}}                    //  [{"name":"张三","id":15}]  返回第一行

 

{{ "ABCDEFGHIJK" | limitTo:5 }} // ABCDE 

自定义过滤器

var app = angular.module('app', []);
// 创建控制器
app.controller('filcon', function ($scope) {
     $scope.name = "张三";
});
// 创建过滤函数
app.filter("addStr", function () {
    var txt = function (param) {
                 return param + " 加李四";
              }
    return txt;
});
 
<div ng-app="app">
    <div ng-controller="filcon">
            {{name | addStr}}
    </div>
</div>
// 张三 加李四  （页面调用结果）