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

Angularjs中对时间格式:/Date(1448864369815)/ 的处理的更多相关文章

  1. 小程序 js中获取时间new date()的用法(网络复制过来自用)

    js中获取时间new date()的用法   获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获 ...

  2. Js中获取时间 new date()的用法

    Js中获取时间 new date()的用法 获取时间: var myDate = new Date();//获取系统当前时间 myDate.getYear(); //获取当前年份(2位) myDate ...

  3. SQL导入txt以及SQL中的时间格式操作

    原文:SQL导入txt以及SQL中的时间格式操作 MySQL中导入txt的指令为: load data local infile "路径名称" into table "表 ...

  4. java中各种时间格式的转化

    http://www.chinaitpower.com/A/2005-01-14/104881.html 使用java.util.Calendar返回间隔天数         static int g ...

  5. javaScript系列:js中获取时间new Date()详细介绍

    var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...

  6. Newtonsoft.Json中的时间格式详解.

    Newtonsoft.json是一款不错的序列化反序列化第三方组件,具体如何使用属于基础知识,此处不再讲解.看以下代码: public class OutgameEntity { public str ...

  7. PHP中日期时间函数date()用法总结

    date()是我们常用的一个日期时间函数,下面我来总结一下关于date()函数的各种形式的用法,有需要学习的朋友可参考. 格式化日期date() 函数的第一个参数规定了如何格式化日期/时间.它使用字母 ...

  8. 【推荐】PHP中格式化时间函数date与gmdate的区别 | 修改PHP的默认时区

    PHP中的时间有2个格式化函数:date()和gmdate(),在官方的文档中的描述为: date -- 格式化一个本地时间/日期 gmdate -- 格式化一个 GMT/UTC 日期/时间,返回的是 ...

  9. JAVA中Sql时间格式与util时间格式转换

    关于时间格式转化: java.util.Date 与 java.sql.Date 互换 sql是子类 字符串转化成java.util.Date     SimpleDateFormat date =n ...

随机推荐

  1. sencha cmd 更新日志

    http://cdn.sencha.com/cmd/6.2.1.29/release-notes.html

  2. Linux进程通信 之 信号灯(semphore)(System V && POSIX)

    一. 信号灯简介 信号灯与其他进程间通信方式不大相同,它主要提供对进程间共享资源访问控制机制. 相当于内存中的标志,进程可以根据它判定是否能够访问某些共享资源,同时,进程 也可以修改该标志.除了用于访 ...

  3. jsp中如何整合CKEditor+CKFinder实现文件上传

    最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...

  4. css hack 整理

    <ul> <li>"_" ------ IE6</li> <li>"-" ------ IE6</li&g ...

  5. 解决Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future:

    php 5个版本,5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器直接上5.5,但是程序出现如下错误:Deprecated: mysql_connect(): The mysql extens ...

  6. ASP.NET连接Oracle数据库的步骤详解(转)

    ASP.NET连接Oracle数据库的步骤详解   本文我们主要介绍了ASP.NET连接Oracle数据库的步骤及每个步骤需要进行的设置,希望能够对您有所帮助.   在用ASP.NET开发应用程序时, ...

  7. MongoDB 基础命令行

    本文专门介绍MongoDB的命令行操作.其实,这些操作在MongoDB官网提供的Quick Reference上都有,但是英文的,为了方便,这里将其稍微整理下,方便查阅. 登录和退出 mongo命令直 ...

  8. Web 开发人员必备的随机 JSON 数据生成工具

    在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...

  9. IOS开发UI基础UITextFidle相关属性

    UITextFidle相关属性 •    enablesReturnKeyAutomatically默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. ...

  10. sprint3(第十天)

    因为近期准备四六级考试还有准备期末的作业,任务比较多,所以进度落下了很多,没有完成预期的计划. 燃尽图