Angular Фильтр даты JS не работает

У меня есть элемент 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>

У меня created_at как timestamp в таблице базы данных MySQL. И я использую 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 = [];
});

Ответы

Ответ 1

Со стороны сервера он возвращает строку created_at как строку из красноречия laravel.

Это можно решить, используя этот 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 = [];
});

Ответ 2

Дата, переданная фильтру, должна быть типа javascript Date.

Вы проверили, что отображается значение blog.created_at, как без фильтра?

Вы сказали, что ваша поддерживаемая служба возвращает строку, представляющую дату. Вы можете решить это двумя способами:

  • Сделайте свой серверный код возвратом объекта даты json
    • проверьте, как код на стороне сервера сериализует json, который он возвращает
  • Напишите свой собственный фильтр, который принимает дату строки и возвращает дату в требуемом формате
    • Примечание: вы можете вызвать фильтр angular в своем собственном фильтре

Вы можете написать свой собственный фильтр следующим образом:

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>

Вместо того, чтобы перебирать возвращаемый массив и затем применять фильтр

Ответ 3

Вы можете создать new Date(/*...*/) на основе извлеченных данных из $http.get, например:

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

В любом случае вы можете увидеть это демо в Plunker.

Надеюсь, это поможет вам.

Ответ 4

вы можете добавить настраиваемый фильтр, который преобразует строку в дату, как следующий код:

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>

Ответ 5

Когда переменная date date запоминает использование ключевого слова 'new', как показано ниже:

var time = new Date();

иначе, если вы пишете как это:

var time = Date();

Дата вызывается как функция, и будет возвращена строка времени даты, которая не может использоваться в качестве входа в фильтр.