WebAPI JSON 日期和 AngularJS答案

【问题标题】：WebAPI JSON Dates and AngularJSWebAPI JSON 日期和 AngularJS
【发布时间】：2014-08-02 00:14:22
【问题描述】：

我正在开发一个用 ASP.NET WebAPI 和 Angular 编写的应用程序。对于我从 WebAPI 获得的 JSON 日期（看起来像 /Date(1402034400000)/），一切都运行良好除了。 Angular 不知道如何处理这个字符串。如果我将其解析为仅数字，那么它将在我使用 date: 'MM/dd/yyyy' 时将其转换为日期。

我该如何以有角度的方式解决这个问题？也许是指令？

在此视图中，person.trainingDate 在呈现的 HTML 中看起来像 /Date(1402034400000)/。即使我添加了| date: 'MM/dd/yyyy'，它也会显示相同的内容，因为 Angular 无法将字符串识别为可解析的日期。

<table class="table table-bordered table-hover">
    <thead><tr><th>Training Date</th></tr></thead>
    <tbody>
        <tr ng-repeat="person in company.people">
            <td>{{person.trainingDate}}</td>
        </tr>
    </tbody>
</table>

谢谢，

亚伦

【问题讨论】：

标签： json angularjs asp.net-web-api

【解决方案1】：

如果您的 WebApi 返回的值是实际日期而不是转换为字符串的日期，则返回的值将类似于 "2012-03-19T07:22Z"，实际上是 ISO 8601 standard .

由浏览器将此值理解为除 IE8 或更早版本之外的大多数浏览器都可以理解的日期（据我所知），但为了保证将此值解析为日期，您可以使用其他 JS moment.js 之类的库。

【讨论】：

【解决方案2】：

要解决您可以创建自定义过滤器的问题，请参阅http://jsbin.com/gaqoce/1/edit

var app = angular.module('app', []);

app.filter('customDate', function(){
  return function(value) {
  var myDate = new Date(value.match(/\d+/)[0] * 1);  
  return  myDate;
  };

});
app.controller('firstCtrl', function($scope){

  $scope.person= {
    trainingDate: '/Date(1402034400000)/'
  };
});

html:

 <div ng-controller="firstCtrl">
  <p>{{person.trainingDate | customDate }}
</p>

【讨论】：