使用AngularJS时，日期没有正确显示

Question

我正在使用AngularJS和ASP.Net MVC来显示用户的数据。 当MVC视图启动时，它调用Angular模块从数据库中获取数据：

<table class="table table-striped">
    <tr ng-repeat="p in products">
        <td>{{p.UserName}}</td>
        <td>{{p.UserDoB}}</td>
        <td class="text-right">
            <button class="btn btn-danger" ng-click="deleteProduct(p)">X</button>
        </td>
    </tr>
</table>

在Angular控制器中，我只是向MVC操作方法发送了ajax请求：

$http.get('/Home/GetUser')
    .success(function (result) {
        $scope.users= result;
    })
    .error(function (data) {
        console.log(data);
    });

在GetUser方法中，再次从数据库中读取是正常的方法：

public JsonResult GetUser()
    {
        User userData = (User)Session["user"];            
        var db = new scaleDBEntities();
        return this.Json((from userObj in db.Users
                          join uc in db.UserContacts
                          on userObj.Id equals uc.usrID
                          join us in db.Users
                          on userObj.usrSupervisor equals us.Id
                          where userObj.Id.Equals(userData.Id)
                          select new
                          {
                              usrNme = userObj.usrNme,
                              usrdob = userObj.usrDoB,                                  
                          })
                          , JsonRequestBehavior.AllowGet
                        );
    }

如果可以看到，usrDoB是SQL Server数据库字段，其数据类型为Date。 我的问题是，当我使用SQL Server Management Studio打开表时，日期值是正确的，但在使用Angular的应用程序上它是不正确的。

例如，日期12/28/1979如下所示：/Date(315187200000)/ ??

有什么想法吗？谢谢

Answer 1

我找到了一个解决方案：

{{1}}

通过这种方式，我可以在绑定过程中动态更改数据格式。

查看% Modulus operator中的完整解决方案，并参考如何使用$ parsers和$ formatters查看jsfiddle

Answer 2

Asp.Net MVC控制器没有使用Newtonsoft Json.net来构建JsonResult，而是使用JavaScriptSerializer。这就是日期格式不正确的原因。

最简单的解决方案是将您的操作移动到Web Api控制器（ApiController），这样就可以使用Newtonsoft Json.net。

另一种选择是创建自定义ActionResult。请参见示例here

Answer 3

您可以使用date = new Date(parseInt(date.substr(6)));将JSON日期转换为javascript中的正确格式。这是一个完整的示例：

<强>控制器：

public class Employee
{
    public int ID { get; set; }
    public DateTime DOB { get; set; }
}

public class HomeController : Controller
{
    public ActionResult AngularDates()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetDates()
    {
        var e1 = new Employee { ID = 0, DOB = new DateTime(1988, 10, 27) };
        var e2 = new Employee { ID = 1, DOB = new DateTime(1969, 05, 09) };
        var employees = new List<Employee> { e1, e2 };

        return Json(new { Employees = employees }, JsonRequestBehavior.AllowGet);
    }
}

查看：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>

<script type="text/javascript">
    angular.module('app', []);

    angular.module("app").controller('mainController', function ($scope, $http, $compile) {

        $scope.GetDates = function (employee) {

            $http.get("/Home/GetDates").
            success(function (data, status, headers, config) {

                debugger;
                data = data.Employees;

                for(var i = 0;i < data.length;i++)
                {
                    var employee = data[i];
                    var date = employee.DOB;
                    var formattedDate = new Date(parseInt(date.substr(6)));

                    var message = "Before - " + date + ". After - " + formattedDate;
                    alert(message);

                    data[i].DOB = formattedDate;
                }

                $scope.employees = data;


            }).
            error(function (data, status, headers, config) {

            });
        }
    });
</script>
<div ng-app="app">
    <div id="mainController" ng-controller="mainController">
        <input type="button" ng-click="GetDates()" value="Get Dates" />
        <table class="table table-striped">
            <tr ng-repeat="e in employees">
                <td>{{e.ID}}</td>
                <td>{{e.DOB | date:'yyyy-MM-dd'}}</td>
                <td class="text-right">
                    <button class="btn btn-danger" ng-click="deleteProduct(p)">X</button>
                </td>
            </tr>
        </table>
    </div>
</div>

浏览器中的输出：