AngularJS:使用JSON提要时,日期不会正确过滤

时间:2015-08-02 13:19:50

标签: json angularjs wordpress

我正在尝试使用AngularJS从Wordpress显示JSON提要并且我的工作非常好,除非我无法弄清楚为什么我的日期过滤器不起作用。

似乎无论我做什么,日期都不会过滤到指定的格式。

我正在尝试格式化日期,因此它显示为:" 2015年7月1日" ,但它被解析为"尽管使用了" date:' longDate'"在我的HTML表达式中过滤。

是因为我在JSON Feed和角度表达式中使用了相同的日期变量吗?

这是我的代码:

<div ng-app="myApp" ng-controller="Ctrl"> 

<div ng-repeat="post in posts | limitTo: 2">
<h1>{{post.title}}</h1>
<p>{{ post.date | date:'longDate' }}</p>
<p>{{post.content | limitTo: 50}}</p>
</div>

</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function($http, $scope) {
$http.get("http://www.intecllc.net/wp/?feed=json&jsonp").success(function(data) {
    $scope.posts = data;
    });
});
 </script>
 </body>
</html>

这里解析的JSON Feed的内容如下:sample page您可以看到日期不受角度&#39; longDate&#39;的影响。过滤

1 个答案:

答案 0 :(得分:1)

您得到的错误是因为服务器返回的日期属性似乎不是日期过滤器可以理解的格式。

相反,循环数据以将日期值替换为实际日期对象:

//This code goes in the success handler:
for (var i =0; i < $scope.posts.length; i++) {
    $scope.posts[i].date = new Date($scope.posts[i].date);
}

使用new Date()更新date属性以包含有效的日期对象。 Date()构造函数接受您的字符串并返回正确的日期对象。

在此之后,您确实可以使用{{post.date | date:'longDate'}}过滤器,它会正确显示。 Plunkr showing that it works