Angularjs中對時間格式:/Date(1448864369815)/ 的處理

来源:http://www.cnblogs.com/similar/archive/2016/08/31/5810304.html
-Advertisement-
Play Games

註:本文使用的 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"}}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 目標:利用R語言統計描繪50組實驗對比結果 第一步:導入.csv文件 X <- read.table("D:abc11.csv",header = TRUE, sep = ",") 第二步:繪圖 ggplot(X, aes(x = aaa, y = bbb)) + geom_point() + ge ...
  • 一、面向過程 VS 面向對象 編程範式 編程是程式員用特定的語法+數據結構+演算法組成的代碼來告訴電腦如何執行任務的過程 ,一個程式是程式員為了得到一個任務結果而編寫的一組指令的集合,正所謂條條大路通羅馬,實現一個任務的方式有很多種不同的方式,對這些不同的編程方式的特點進行歸納總結得出來的編程方式類 ...
  • Java 同步塊(synchronized block)用來標記方法或者代碼塊是同步的。Java 同步塊用來避免競爭。本文介紹以下內容: Java 同步關鍵字(synchronzied) 實例方法同步 靜態方法同步 實例方法中同步塊 靜態方法中同步塊 Java 同步示例 Java 同步關鍵字(syn ...
  • 1 Servlet生命周期Servlet 生命周期:Servlet 載入 >實例化 >服務 >銷毀。 init():在Servlet的生命周期中,僅執行一次init()方法。它是在伺服器裝入Servlet時執行的,負責初始化Servlet對象。可以配置伺服器,以在啟動伺服器或客戶機首次訪問Servl ...
  • 一、迭代器(iterator) 在Python中,for迴圈可以用於Python中的任何類型,包括列表、元祖等等,實際上,for迴圈可用於任何“可迭代對象”,這其實就是迭代器 迭代器是一個實現了迭代器協議的對象,Python中的迭代器協議就是有next方法的對象會前進到下一結果,而在一系列結果的末尾 ...
  • 1 <%@include file="xxx.jsp"%>為jsp中的編譯指令,其文件的包含是發生在jsp向servlet轉換的時期,而<jsp:include page="xxx.jsp">是jsp中的動作指令,其文件的包含是發生在編譯時期,也就是將java文件編譯為class文件的時期 。 2使 ...
  • 之前的幾個月在“跟誰學”平臺上錄製了一些視頻,得到了不少開發者的支持,併在實際工作中也幫助了不少人,自己當然也很開心,下麵介紹一下跟誰學課程的目錄 倉儲大叔講系統架構 專註於dotNet架構與設計 主講:倉儲大叔,洋名:Lind 博客地址:http://www.cnblogs.com/lori 套裝 ...
  • 通過瀏覽器地址欄輸入url並通過?傳遞參數請求資源時,?後面的參數叫做 "查詢字元串",會觸發後臺Servlet的doGet(),因為通過瀏覽器地址欄直接訪問的方式是GET方式。 下麵順便瞭解一下form的method屬性對傳參的影響。 原始表單:<form id="myForm"><label>用 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...