web-dev-qa-db-fra.com

Angular Le filtre de date JS ne fonctionne pas

J'ai un élément ng-repeat Qui parcourra le résultat $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>

J'ai created_at En tant que timestamp dans la table de base de données MySQL. Et j'utilise angular.js v1.0.7.

J'obtiens la même sortie de la table db et le filtre de date ne fonctionne pas. Comment puis-je résoudre ça?

Mon appel 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 = [];
});
angularjsangularjs-ng-repeatangularjs-filter
23
devo

Côté serveur, il renvoie le created_at comme chaîne de l'éloquent laravel.

Cela peut être résolu en utilisant ce javascript,

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

Donc, le 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 = [];
});
15
devo

La date passée au filtre doit être de type javascript Date .

Avez-vous vérifié la valeur blog.created_at s'affiche comme sans le filtre?

Vous avez dit que votre service soutenu renvoyait une chaîne représentant la date. Vous pouvez résoudre ce problème de deux manières:

  1. Faites en sorte que votre code côté serveur renvoie un objet date json
    • vérifier comment le code côté serveur sérialise le json qu'il retourne
  2. Écrivez votre propre filtre qui accepte la date de la chaîne et renvoie la date au format requis
    • Remarque: vous pouvez appeler le filtre angular dans votre propre filtre

Vous pouvez écrire votre propre filtre comme suit:

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

Et utilisez-le comme ceci dans votre modèle:

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

Plutôt que de parcourir le tableau renvoyé, puis d'appliquer le filtre

41
Anoopsingh Bayes

vous pouvez ajouter un filtre personnalisé qui convertit la chaîne en date, comme le code suivant:

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

puis utilisez ce filtre dans n'importe quel modèle comme code suivant:

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

Vous pouvez créer new Date(/*...*/) sur la base des données extraites de $http.get, comme:

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

Quoi qu'il en soit, vous pouvez voir cette démo dans Plunker.

J'espère que cela vous aidera

6
Maxim Shoustin

Lorsque vous enregistrez une variable de date, n'oubliez pas d'utiliser le mot-clé "nouveau" comme ci-dessous:

var time = new Date();

sinon si vous écrivez comme ceci:

var time = Date();

La date est appelée en tant que fonction et une chaîne de date-heure sera renvoyée qui ne peut pas être utilisée comme entrée dans le filtre.

2
Yang Zhang