角度JS数据过滤器不工作

I have an ng-repeat element which will loop through $http.get() result.

我有一个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>

I have created_at as timestamp in MySQL database table. And I am using angular.js v1.0.7.

我在MySQL数据库表中创建了created_at作为时间戳。我用的是角。js v1.0.7。

I am getting the same output from db table and date filter is not working. How can I solve this?

我正在从db表中获得相同的输出，并且日期过滤器不能工作。我怎么解决这个问题?

My ajax call,

我的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 = [];
});

5 个解决方案

#1

The date passed to the filter needs to be of type javascript Date.

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

Have you checked what the value blog.created_at is displayed as without the filter?

你查过value博客了吗?created_at显示为没有过滤器的吗?

You said your backed service is returning a string representing the date. You can resolve this in two ways:

您说支持的服务返回一个表示日期的字符串。你可以用两种方法来解决这个问题:

Make your server-side code return a json date object
- check how the server side code serialize the json that it returns
- 检查服务器端代码如何序列化返回的json
让服务器端代码返回一个json日期对象，检查服务器端代码如何序列化返回的json
Write your own filter which accepts the string date and returns date in the required format
- Note: you can call the angular filter in your own filter
- 注意:您可以在自己的过滤器中调用角过滤器
编写您自己的过滤器，它接受字符串日期并以所需的格式返回日期注意:您可以在您自己的过滤器中调用角过滤器

You can write your own filter as follows:

你可以写你自己的过滤器如下:

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

And use it like this in your template:

在模板中使用它:

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

Rather than looping through the returned array and then applying the filter

而不是在返回的数组中循环，然后应用过滤器

#2

From the server side, it returns the created_at as string from the laravel eloquent.

从服务器端返回laravel的created_at作为字符串。

This can be solved using this javascript,

这可以用javascript来解决，

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

So the code,

因此,代码,

$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 = [];
});

#3

you can add a custom Filter which convert string to date, as the following code:

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

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

then use this filter in any template as the following code:

然后在任何模板中使用这个过滤器，如下所示:

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

#4

You can create new Date(/*...*/) based on fetched data from $http.get, like:

您可以基于从$http获取的数据创建新的日期(/*…*/)。,如:

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

Anyways you can see this Demo in Plunker.

不管怎样，你可以在柱塞中看到这个演示。

Hope it will help you

希望它能对你有所帮助

#5

When record date variable remember to use 'new' keyword as below:

当记录日期变量时，请记住使用“new”关键字如下:

var time = new Date();

otherwise if you write as this:

否则，如果你这样写:

var time = Date();

Date is called as a function and a date time string will be returned which cannot be used as input to the filter.

日期被称为函数，日期时间字符串将被返回，它不能用作过滤器的输入。

#1