AngularJS从后端获取/Date(时间戳)/格式日期的转换方法

嘿，这种/Date(1551579360000)/格式的日期我可太熟了！这是.NET后端常见的JSON日期序列化方式，在AngularJS里处理起来一点都不难，给你分享几个实用的解决办法：

AngularJS的过滤器天生就是用来处理这类格式化需求的，写一个全局过滤器之后，不管是模板里还是控制器里都能调用，超级方便：

// 在你的AngularJS模块中注册过滤器
angular.module('yourAppModule')
.filter('dotNetDate', function() {
  return function(dateStr) {
    // 先判断输入是否有效，避免报错
    if (!dateStr || !dateStr.match(/\d+/)) return '无数据';
    
    // 提取括号里的毫秒级时间戳
    const timestamp = parseInt(dateStr.match(/\d+/)[0]);
    const date = new Date(timestamp);
    
    // 这里可以自定义输出格式，比如下面是"年-月-日 时:分:秒"的格式
    return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    
    // 如果你想偷懒用浏览器默认的本地化格式，也可以直接写：
    // return date.toLocaleString();
  };
});

在模板里使用就更简单了，直接在绑定数据后面加过滤器就行：

<div>事件编号：{{ item.Name }}</div>
<div>事件类型：{{ item.IncidentTyleName }}</div>
<div>事件日期：{{ item.IncidentDate | dotNetDate }}</div>
<div>通知日期：{{ item.NotificationDate | dotNetDate }}</div>

如果只是某个页面或者某条数据需要处理，不想写过滤器，也可以在获取到服务器数据后直接转换：

angular.module('yourAppModule')
.controller('IncidentController', function($scope, $http) {
  $http.get('/your/api/url')
    .then(function(response) {
      const incident = response.data;
      
      // 处理IncidentDate
      if (incident.IncidentDate) {
        const timestamp = parseInt(incident.IncidentDate.match(/\d+/)[0]);
        // 转成Date对象，之后可以在模板里用Angular内置的date过滤器格式化
        incident.IncidentDate = new Date(timestamp);
        // 或者直接转成字符串：incident.IncidentDate = new Date(timestamp).toLocaleString();
      }
      
      // 处理NotificationDate同理
      if (incident.NotificationDate) {
        const timestamp = parseInt(incident.NotificationDate.match(/\d+/)[0]);
        incident.NotificationDate = new Date(timestamp);
      }
      
      $scope.incident = incident;
    });
});

之后在模板里如果用内置的date过滤器，还能灵活调整格式：

<div>通知日期（自定义格式）：{{ incident.NotificationDate | date:'yyyy-MM-dd' }}</div>

如果你想在控制器里直接完成格式化，也可以用AngularJS内置的$filter服务，先转成Date对象再调用内置的date过滤器：

angular.module('yourAppModule')
.controller('IncidentController', function($scope, $http, $filter) {
  $http.get('/your/api/url')
    .then(function(response) {
      const incident = response.data;
      
      // 提取时间戳并格式化
      const incidentTimestamp = parseInt(incident.IncidentDate.match(/\d+/)[0]);
      $scope.formattedIncidentDate = $filter('date')(new Date(incidentTimestamp), 'yyyy-MM-dd HH:mm:ss');
      
      const notificationTimestamp = parseInt(incident.NotificationDate.match(/\d+/)[0]);
      $scope.formattedNotificationDate = $filter('date')(new Date(notificationTimestamp), 'MM/dd/yyyy');
    });
});

小提醒 #

• 记得要判断日期字符串是否为空或者格式无效，避免出现NaN或者报错的情况
• 这种格式里的时间戳是毫秒级的，直接传给new Date()就可以，不用除以1000
• 如果需要特定的国际化格式，可以调整toLocaleString()的参数，或者自定义字符串拼接逻辑

内容的提问来源于stack exchange，提问作者Phương Ngọc