註:本文使用的 angular 版本為 1.3 版 我們在後臺對數據進行json序列化時,如果數據中包含有日期,序列化後返回到前端的結果可能是這樣的: /Date(1448864369815)/ 。可是往往我們要在前臺顯示正常的日期格式,該如何處理呢?在angularjs(後面簡稱 ng)中處理起來 ...
註:本文使用的 angular 版本為 1.3 版
我們在後臺對數據進行json序列化時,如果數據中包含有日期,序列化後返回到前端的結果可能是這樣的: /Date(1448864369815)/ 。可是往往我們要在前臺顯示正常的日期格式,該如何處理呢?在angularjs(後面簡稱 ng)中處理起來還是挺方便的,首先我們來看下ng中內置的過濾器:date。
ng 過濾器有兩種使用方式,分別是: ng表達式 和 控制器中使用代碼調用
一. ng表達式
<!-- 表達式中使用 --> {{ dt1 | date:'yyyy-MM-dd HH:mm:ss' }}
二. 控制器中使用
//必須註入 $filter 模塊 app.controller("demoCtrl", ["$scope", "$filter", function($scope, $filter){ $scope.dt1 = new Date(); //控制器中使用 $scope.dt2 = $filter("date")($scope.dt1, "yyyy-MM-dd HH:mm:ss"); }]);
因為 $filter("date")(param, format) 中的 param 是可以接收時間戳的,所以如果我們的日期格式是: /Date(1448864369815)/ 這樣的,我們只要獲取到裡面的時間戳(即: 1448864369815),就可以進行格式轉換了,如下所示:
//前臺輸出 dt3 結果為 2015-11-30 14:19:29 $scope.dt3 = $filter("date")(1448864369815, "yyyy-MM-dd HH:mm:ss");
那麼我們如何獲取 /Date(1448864369815)/ 裡面的時間戳 1448864369815 呢?方法如下:
var _dt = "/Date(1448864369815)/"; //轉成數字類型 var timestamp = Number(_dt.replace(/\/Date\((\d+)\)\//, "$1"));
在 ng 中是支持自定義過濾器的(自定義過濾器如果不瞭解,請自行百度),因此我們可以在原有的 date 過濾器的基礎上進行一次包裝,編寫一個我們自己的過濾器,實現由 /Date(1448864369815)/ 到常規時間格式的轉換。代碼如下:
//自定義過濾器 jsonDate app.filter("jsonDate", function($filter) { return function(input, format) { //先得到時間戳 var timestamp = Number(input.replace(/\/Date\((\d+)\)\//, "$1")); //轉成指定格式 return $filter("date")(timestamp, format); } });
實現後,就可以像內置的 date 過濾器一樣使用了。
// 控制器中使用 $filter("jsonDate")("/Date(1448864369815)/", "yyyy-MM-dd HH:mm:ss");
<!-- 表達式中使用 --> {{"/Date(1448864369815)/" | jsonDate:"yyyy-MM-dd HH:mm:ss"}}