[英]Date formatting from JSON and HTML tags in angularJS
i have a 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;
}
and a markup 和一个标记
<div ng-app>
<div ng-controller="TestCtrl">
Date is {{Date | date : 'MMM d, y'}}
<p>{{Content}}</p>
</div>
</div>
and i expect a result that parse the date to MMM d, y but the problem is the result from json Date is something like this /Date(000000000)/ i don't know the name of the format. 而且我期望将日期解析为MMM d,y的结果,但是问题是来自json Date的结果是这样的/ Date(000000000)/我不知道格式的名称。 :) and also, the html tags are printed as plain text..
:),并且html标记以纯文本格式打印。
Check this jsFiddle for testing 检查此jsFiddle进行测试
Thanks in advance.. 提前致谢..
What's happening is, you're trying to parse the Date with the '/Date()/' text in it. 发生的情况是,您正在尝试使用其中的'/ Date()/'文本解析Date。 So you have to extract the numbers first, then use the filter.
因此,您必须先提取数字,然后使用过滤器。
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;
}
As for the html. 至于HTML。 Use ng-bind-html-unsafe (angularjs 1.1.1)
使用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/ jsfiddle: http : //jsfiddle.net/9NBLB/
edit, here's another way: 编辑,这是另一种方式:
https://stackoverflow.com/a/2316066/769083 https://stackoverflow.com/a/2316066/769083
$scope.Date = new Date(parseInt(dateFromJson.substr(6)));
EDIT 编辑
Initialize App and 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)));
}
}]);
Custom Directive uses $observe
to read the attribute value then uses element.html()
to write the html out: 自定义指令使用
$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: 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/ jsfiddle: http : //jsfiddle.net/fXE5d/6/
看来您必须首先评估JSON日期字符串。
$scope.Date = eval(dateFromJson.match(/\/(.*)\//)[1]);
Use a library like momentjs to handle the parsing for you. 使用momentjs之类的库为您处理解析。 See the fiddle here: http://jsfiddle.net/ahchurch/vkNk2/3/
在这里查看小提琴: http : //jsfiddle.net/ahchurch/vkNk2/3/
<div ng-app>
<div ng-controller="TestCtrl">
Date is {{Date | date : 'MMM d, y'}}
<p>{{Content}}</p>
</div>
</div>
function TestCtrl($scope)
{
var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>';
var dateFromJson = '/Date(1394526738123)/';
$scope.Date = moment(dateFromJson).valueOf();
$scope.Content = contentFromJson;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.