Angular - 过滤器

什么是过滤器

过滤器可以用来格式化需要展示的数据。AngularJS 有很多内置过滤器，同时也可以自己创建过滤器。

如何使用过滤器

1. 在 HTML 模板绑定符号 {{}} 中通过 | 来调用过滤器，若需要传递参数，过滤器名字后面以 : 分隔；
   例：
   {{ time | date }}
{{ time | date : 'yyy-MM-dd' }}
2. 在 js 代码中通过 $filter 调用。
   例：

angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
      $scope.time = $filter('date')(1249448523423)
    }]);

内置过滤器

1. currency：
   currency 可以将数值格式化成货币格式（currency允许自定义设置货币符号，默认采用客户端所在区域货币符号）。

2. date：
   date 可以将日期格式化成需要的格式（默认采用 mediumDate格式）。
   (1). AngularJS内置的支持本地化的日期格式：

   • {{ time | date : 'medium' }} => Aug 5, 2009 1:02:03 PM
   • {{ time | date : 'short' }} => 8/5/09 1:02 PM
   • {{ time | date : 'fullDate' }} => Wednesday, August 5, 2009
   • {{ time | date : 'longDate' }} => August 5, 2009
   • {{ time | date : 'mediumDate' }} => Aug 5, 2009
   • {{ time | date : 'shortDate' }} => 8/5/09
   • {{ time | date : 'mediumTime' }} => 1:02:03 PM
   • {{ time | date : 'shortTime' }} => 1:02 PM

   (2). 年份格式化

   • 四位：{{ time | date : 'yyyy' }} => 2009
   • 两位：{{ time | date : 'yy' }} => 09
   • 一位：{{ time | date : 'y' }} => 2009

   (3). 月份格式化

   • 英文：{{ time | date : 'MMMM' }} => August
   • 英文简写：{{ time | date : 'MMM' }} => Aug
   • 数字：{{ time | date : 'MM' }} => 08
   • 一年中第几月：{{ time | date : 'M' }} => 8

   (4). 日期格式化

   • 英文星期：{{ time | date : 'EEEE' }} => Wednesday
   • 英文星期简写：{{ time | date : 'EEE' }} => Wed
   • 数字日期：{{ time | date : 'dd' }} => 05
   • 一月中第几天：{{ time | date : 'd' }} => 5

   (5). 小时格式化

   • 24时：{{ time | date : 'HH' }} => 13
   • 一天中第几个小时：{{ time | date : 'H' }} => 13
   • 12时：{{ time | date : 'hh' }} => 01
   • 上午或下午第几小时：{{ time | date : 'h' }} => 1

   (6). 分钟格式化

   • 数字：{{ time | date : 'mm' }} => 02
   • 一小时中第几分钟：{{ time | date : 'm' }} => 2

   (7). 秒数格式化

   • 数字：{{ time | date : 'ss' }} => 03
   • 一分钟中第几秒：{{ time | date : 's' }} => 3
   • 毫秒：{{ time | date : 'sss' }} => 423

   (8). 字符格式化

   • 上下午标识：{{ time | date : 'a' }} => PM
   • 四位时区标识：{{ time | date : 'Z' }} => +0800

   (9). 自定义

   • {{ time | date : 'MMMd, y' }} => Aug5, 2009
   • {{ time | date : 'EEEE, d, M' }} => Wednesday, 5, 8
   • {{ time | date : 'hh:mm:ss.sss' }} => 01:02:03.423

3. filter：
   filter 可以从给定的数组中选择一个子集，并将其生成一个新数组返回。
   (1). 第一个参数可以为字符串、对象或函数：

   • 字符串：返回包含这个字符串的元素；
   • !字符串：返回不包含这个字符串的元素；
   • 对象：将带过滤对象的属性同该对象的同名属性比较，若属性值包含则返回（若想全部属性对比，可以用 $ 作为键名）；
   • 函数：对每个元素执行该函数，若为真则返回。

4. json：
   json 可以将 JSON 或 JavaScript 对象转换成字符串。

5. limitTo：
   limitTo 会根据传入的参数生成一个新的数字或字符串，长度取决于参数，参数正负决定从前截取还是从后截取（如果参数大于被操作数组或字符串长度，那么会全部返回）。

6. lowercase：
   lowercase 将字符串转为小写。

7. number：
   number 将数字格式化成文本，参数可选，用来控制小数点后位数（若传入一个非数字字符，则返回空字符串）。
   例：{{ 1249448523423.2134 | number : 2 }} => 1,249,448,523,423.21

8. orderBy：
   orderBy 可以用表达式对指定数组进行排序。
   orderBy 接受两个参数：第一个参数是用来确定数组排序方向谓词（必填）；第二个参数用来控制排序方向是否逆向（选填）。

{{ [{
      name: 'a',
      age: 21
    }, {
      name: 'c',
      age: 18
    }, {
      name: 'b',
      age: 24
    }] | orderBy : 'name' }}

=> [{"name":"a","age":21},{"name":"b","age":24},{"name":"c","age":18}]

9. uppercase：
   uppercase 将字符串转为大写。

自定义过滤器

创建一个自定义过滤器需要将其放到自己的模块中。

  

    
{{val | typeChange}}