javascript - AngularJS 中 JSON 和 HTML 标签的日期格式

Question

我有一个 Controller

function TestCtrl($scope)
{
    var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>';
    var dateFromJson = '/Date(1394526738123)/';

    $scope.Date = dateFromJson;   
    $scope.Content = contentFromJson;
}

和标记

<div ng-app>
    <div ng-controller="TestCtrl">
        Date is {{Date | date : 'MMM d, y'}}
        <p>{{Content}}</p>
    </div>
</div>

我希望得到一个将日期解析为MMM d, y的结果，但问题是来自json Date的结果是这样的/Date(000000000)/我不知道格式的名称。 :) 而且，html 标签被打印为纯文本..

检查这个 jsFiddle 进行测试

JsFiddle

提前致谢..

Answer 1

发生的情况是，您尝试解析其中包含“/Date()/”文本的日期。所以你必须先提取数字，然后使用过滤器。

Controller :

function TestCtrl($scope)
{
    var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>';
    var dateFromJson = '/Date(1394526738123)/';
    var regexPattern = /\d+/g;
    $scope.Date = dateFromJson.match(regexPattern)[0];    
    $scope.Content = contentFromJson;
}

至于html。使用 ng-bind-html-unsafe (angularjs 1.1.1)

<div ng-app>
    <div ng-controller="TestCtrl">
        Date is {{Date | date : 'MMM d, y'}}
        <p ng-bind-html-unsafe="Content"></p>
    </div>
</div>

jsfiddle:http://jsfiddle.net/9NBLB/

编辑，这是另一种方法:

https://stackoverflow.com/a/2316066/769083

$scope.Date = new Date(parseInt(dateFromJson.substr(6)));

<小时/>

编辑

初始化应用程序和 Controller :

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

app.controller('TestingCtrl', ['$scope', function ($scope) {

    $scope.Content =
    [
        { Date : '/Date(1394526738123)/', Message : 'Hi! <b>Bold</b>' },
        { Date : '/Date(1394526738143)/', Message : 'Hi! <i>Italic</i>' }
    ];

    $scope.ParseDate = function (dt) {
        return new Date(parseInt(dt.substr(6)));
    }

}]);

自定义指令使用 $observe 读取属性值，然后使用 element.html() 写出 html:

app.directive("showHtml", function() {
  return {
    restrict: 'A',
    scope: {showHtml: '@'},
    link: function(scope, element, attrs) {
        attrs.$observe('showHtml', function() {
            element.html(scope.showHtml);
        });

    } 
  }
});

HTML:

<div ng-app="MyApp">
    <div ng-controller="TestingCtrl">
        <div ng-repeat="content in Content">
            Message: <span show-html="{{content.Message}}"></span> <br />
            Date: {{ParseDate(content.Date) | date : 'MMM d, y'}} <br /><br />
        </div>
    </div>
</div>

jsfiddle:http://jsfiddle.net/fXE5d/6/