Фильтр даты 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.

Я получаю тот же вывод из таблицы БД, и фильтр даты не работает. Как я могу это решить?

Мой вызов 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
person devo    schedule 29.10.2013    source источник

Ответы (5)


arrow_upward
42
arrow_downward

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

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

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

  1. Make your server-side code return a json date object
    • check how the server side code serialize the json that it returns
  2. 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

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

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>

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

person Anoopsingh Bayes    schedule 29.10.2013
comment
Я заметил это в некоторых ответах. Но как я могу добиться этого в своем вызове $http? Оба раза я получаю 2013-10-08 00:00:00 - person devo; 29.10.2013
comment
Спасибо, я описал, что у меня есть дата в формате метки времени, и я ожидал четкого кода с моим фрагментом. Поэтому, чтобы преобразовать это, я должен использовать некоторое регулярное выражение. Я опубликовал свой окончательный результат работы. - person devo; 29.10.2013
comment
добавление split('.')[0] работает для меня .. поэтому новая tempdate выглядит как -- var tempdate= new Date((text.replace(/-/g,/).split('.')[ 0])); - person UberNeo; 28.07.2014
comment
для этого есть встроенные методы. Почему вы используете фреймворк - person atilkan; 30.12.2014

arrow_upward
15
arrow_downward

Со стороны сервера он возвращает 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 = [];
});
person devo    schedule 29.10.2013
comment
почему не угловой forEach - person Vignesh; 27.04.2015
comment
@Vignesh Да, я должен это использовать. - person devo; 28.04.2015

arrow_upward
9
arrow_downward

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

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>
person Mhd Wael Jazmati    schedule 07.01.2017

arrow_upward
6
arrow_downward

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

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

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

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

person Maxim Shoustin    schedule 29.10.2013
comment
Спасибо, я описал, что у меня есть дата в формате метки времени. Поэтому, чтобы преобразовать это, я должен использовать некоторое регулярное выражение. Я опубликовал свой окончательный результат работы. - person devo; 29.10.2013

arrow_upward
2
arrow_downward

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

var time = new Date();

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

var time = Date();

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

person Yang Zhang    schedule 02.02.2015