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只能對字符串進行過濾轉換