Angular JS日期过滤器不起作用答案

【问题标题】：Angular JS Date filter not workingAngular JS日期过滤器不起作用
【发布时间】：2013-11-08 08:01:26
【问题描述】：

我有一个 ng-repeat 元素，它将循环通过 $http.get() 结果。

<tr ng-repeat="blog in posts">
     <td style="text-align:center">{{ $index+1 }}</td>
     <td>{{ blog.title }}</td>
     <td>
         {{ blog.author.name }}
     </td>
     <td>
         {{ blog.created_at | date:'MMM-dd-yyyy' }}
     </td>
</tr>

我在 MySQL 数据库表中有 created_at 和 timestamp。我正在使用angular.js v1.0.7。

我从 db 表中得到相同的输出，但日期过滤器不起作用。我该如何解决这个问题？

我的 ajax 调用，

$http({method: 'GET', url: 'http://localhost/app/blogs'}).
success(function(data, status, headers, config) {
    $scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
    $scope.posts = [];
});

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

传递给过滤器的日期需要是 javascript Date 类型。

您是否检查过没有过滤器时blog.created_at 显示的值？

您说您的支持服务正在返回一个表示日期的字符串。您可以通过两种方式解决此问题：

让您的服务器端代码返回一个 json 日期对象
- 检查服务器端代码如何序列化它返回的 json
编写您自己的过滤器，接受字符串日期并以所需格式返回日期
- 注意：您可以在自己的过滤器中调用角度过滤器

您可以编写自己的过滤器，如下所示：

app.filter('myDateFormat', function myDateFormat($filter){
  return function(text){
    var  tempdate= new Date(text.replace(/-/g,"/"));
    return $filter('date')(tempdate, "MMM-dd-yyyy");
  }
});

并在您的模板中像这样使用它：

<td>
  {{ blog.created_at | myDateFormat }}
</td>

而不是遍历返回的数组然后应用过滤器

【讨论】：

我在一些答案中注意到了这一点。但是我怎样才能在我的$http 通话中实现这一点？两次我都收到2013-10-08 00:00:00
谢谢，我已经描述了我有时间戳格式的日期，并且我希望我的 sn-p 有清晰的代码。所以要转换它，我必须使用一些正则表达式。我已经发布了我的最终工作结果。
添加 split('.')[0] 对我有用.. 所以新的临时日期看起来像 -- var tempdate= new Date((text.replace(/-/g,"/ ").split('.')[0]));
这里有内置的方法。为什么要使用框架

【解决方案2】：

您可以根据从$http.get 获取的数据创建new Date(/*...*/)，例如：

$scope.date = new Date('2013', '10', '28'); // for example

无论如何你都可以在 Plunker 中看到这个演示。

希望对你有帮助

【讨论】：

谢谢，我已经描述了我的日期是时间戳格式。所以要转换它，我必须使用一些正则表达式。我已经发布了我的最终工作结果。

【解决方案3】：

从服务器端，它返回 created_at 作为来自 laravel eloquent 的字符串。

这可以使用这个javascript来解决，

new Date("date string here".replace(/-/g,"/"));

所以代码，

$http({method: 'GET', url: 'http://localhost/app/blogs'}).
success(function(data, status, headers, config) {
   angular.forEach(data.posts, function(value, key){
     data.posts[key].created_at = new Date(data.posts[key].created_at.replace(/-/g,"/"));
   }
   $scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
    $scope.posts = [];
});

【讨论】：

为什么不用 Angular forEach
@Vignesh 是的，我应该利用它。

【解决方案4】：

当记录日期变量时记得使用'new'关键字如下：

var time = new Date();

否则如果你这样写：

var time = Date();

日期作为函数调用，将返回一个日期时间字符串，该字符串不能用作过滤器的输入。

【讨论】：

【解决方案5】：

您可以添加一个将字符串转换为日期的自定义过滤器，如下代码：

app.filter('stringToDate',function ($filter){
    return function (ele,dateFormat){
        return $filter('date')(new Date(ele),dateFormat);
    }
})

然后在任何模板中使用此过滤器，如下代码：

<div ng-repeat = "a in data">{{a.created_at |stringToDate:"medium"}}</div>

【讨论】：