注:本文使用的 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. zmq 学习笔记

    0. PUB/SUB, XPUB/XSUB filtering happens at publisher sides when sockets are using a connected protoc ...

  2. (转)linux内核虚拟文件系统浅析

    转自http://hi.baidu.com/_kouu/item/4e9db87580328244ef1e53d0 ###### 虚拟文件系统(VFS)在我看来, "虚拟"二字主要 ...

  3. 【翻译】VSM 和触发器

    原文:The VisualStateManager and Triggers Author:Carole Snyder Silverlight 推出了可视化状态管理器( Visual State Ma ...

  4. Cwinux简介及用法简述

    我在我的个人博客上发表了一篇文章 Cwinux简介及用法简述 http://apprentice89.com/cwinux_introduction_and_use/

  5. ruby -- 进阶学习(二)paperclip上传图片

    Need to add image attachments to a model? See how with paperclip in this episode. 在命令行输入: rails g pa ...

  6. windows下面go语言环境搭建

    步骤一:golang下载 下载地址是:http://www.golangtc.com/download 下载完成之后解压缩,放到你的c:/根目录下面.然后配置一下环境变量! 环境变量配置如下: 1.新 ...

  7. java中的vo 、dto 、dao--转

    原文地址:http://yinchunjian.iteye.com/blog/758196 O是跟数据库里表的映射,一个表对应一个VO DAO是用VO来访问真实的表,对数据库的操作都在DAO中完成 B ...

  8. 解决debian中脚本无法使用source的问题

    #!/bin/sh source scripts/common.sh 现象: shell脚本中source aaa.sh时提示 source: not found 原因: ls -l `which s ...

  9. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  10. 3 Servlet监听器

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 1. ServletConfig和ServletContext 1.1 ServletConfig和Servle ...