angular 时间戳 转 格式化日期（ 过滤器 ）

angular学习笔记【 一 】

angular 时间戳 转 格式化日期（ 过滤器 ）

如果我们得到一个unix的时间戳，我们需要将它转换成另外一种格式之后才能显示给用户，这转换的一步就是过滤器。

用户register时，可能会输入一些奇怪的内容，要是大家要做防范，对用户输入的内容进行过滤，这也得用到过滤器。

在angular中内置了几个常用的filter,可以简化我们的操作。过滤器使用 '|' 符号，概念有点类似于linux中的管道。

1、currency货币过滤器

有时候我们需要把数字显示为货币的形式方便展示，可以使用currency进行格式化

{{1000 | currency }}
{{1000 | currency:"RMB ￥" }}

显示：

$1,000.00
RMB ￥1,000.00

 

2、date时间格式化过滤器

在系统后台返回的数据中，时间字段，我们可能使用的是时间戳，Long型，在页面显示中肯定格式化为类似于‘2012-12-12 12:12:12’的字符串，使用date过滤器即可

{{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}}

显示：

2015-02-05 17:57:49

 

示例：

<div ng-controller="TestCtrl">
  {{ a | date: 'yyyy-MM-dd HH:mm:ss' }}
  </div>
  
  <script type="text/javascript">
  var TestCtrl = function($scope){
    $scope.a = ((new Date().valueOf()));
  }
  
  angular.bootstrap(document.documentElement);
  </script>

 

3、filter （过滤列表）

filter可以根据条件过滤数据。

filter 是一个过滤内容的标签，如果参数是一个字符串，则列表成员中的任意属性值中有这个字符串，即为满足条件（忽略大小写）。

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}

显示：

[{"name":"coolcao","age":23}]

 

示例：

<div ng-controller="TestCtrl">
    {{ data | filter: 'b' }} <br />
    {{ data | filter: '!B' }} <br />
  </div>
  
  <script type="text/javascript">
  var TestCtrl = function($scope){
    $scope.data = [
      {name: 'B', age: 4},  
      {name: 'A', age: 1},  
      {name: 'D', age: 3},  
      {name: 'C', age: 3},  
    ];
  }
  
  angular.bootstrap(document.documentElement);
  </script>

可以使用对象，来指定属性名， $ 表示任意属性：

{{ data | filter: {name: 'A'} }} <br />
{{ data | filter: {$: '3'} }} <br />
{{ data | filter: {$: '!3'} }} <br />

自定义的过滤函数也支持：

<div ng-controller="TestCtrl">
    {{ data | filter: f }} <br />
  </div>
  
  <script type="text/javascript">
  var TestCtrl = function($scope){
    $scope.data = [
      {name: 'B', age: 4},  
      {name: 'A', age: 1},  
      {name: 'D', age: 3},  
      {name: 'C', age: 3},  
    ];
  
    $scope.f = function(e){
      return e.age > 2;
    }
  }
  
  angular.bootstrap(document.documentElement);
  </script>

 

4、number : 数字格式化

{{ 3.1415926 | number:1 }}
{{ 3.1415926 | number:2 }}
{{ -3.1415926 | number:2 }}
{{ 3 | number:2 }}
{{ 0.002 | number:2 }}
{{ 0.009 | number:2 }}
{{100 | number}}
{{1000 | number}}
{{1000 | number:2}}

显示：

3.1
3.14
-3.14
3.00
0.00
0.01
100
1,000
1,000.00

 

5、orderBy 排列

orderBy 是一个排序用的过滤器标签。它可以像 sort 函数那样支持一个排序函数，也可以简单地指定一个属性名进行操作。

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age'}}

显示：

[{"name":"lily","age":20},{"name":"tom","age":22},{"name":"coolcao","age":23}]

默认是升序排列，如果要倒序：

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age':true}}

 

示例：

<div ng-controller="TestCtrl">
    {{ data | orderBy: 'age' }} <br />
    {{ data | orderBy: '-age' }} <br />
    {{ data | orderBy: '-age' | limitTo: 2 }} <br />
    {{ data | orderBy: ['-age', 'name'] }} <br />
  </div>
  
  
  <script type="text/javascript">
  var TestCtrl = function($scope){
    $scope.data = [
      {name: 'B', age: 4},  
      {name: 'A', age: 1},  
      {name: 'D', age: 3},  
      {name: 'C', age: 3},  
    ];
  }
  
  angular.bootstrap(document.documentElement);
  </script>

 

6、json格式化

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | json}}

显示：

[ { "name": "coolcao", "age": 23 }, { "name": "lily", "age": 22 }, { "name": "tom", "age": 22 } ]

注：输入是js的对象（非标准json），输出的是标准的json字符串（属性名称会用双引号）

 

7、大小写转换： uppercase，lowercase

{{'abc' | uppercase}}

显示：

ABC

注：uppercase，lowercase只能对字符串进行过滤转换