2013-02-21 16 views
8

Ho un servizio che restituisce JSON in questo modo:filtro data angularjs non formattare il mio valore JSON

"Results":[{"Id":"1","SomeDate":"2/19/2013 10:34:04 PM"} 

Quando provo a formattare utilizzando vincolante, doesnt lavoro - solo visualizza la stringa di cui sopra:

{{values.SomeDate| date:'mediumTime' }} 

Tuttavia, funziona se mi limito a passare in questo formato:

{{ '1997-03-01T00:00:00+01:00' | date:'mediumTime'}} 

Qual è il modo migliore per risolvere questo problema?

+1

documenti definiscono formati di data, passa un formato valido dal server o creare filtro personalizzato che analizza i dati su un data valida http://docs.angularjs.org/api/ng.filter:date – charlietfl

risposta

12

Come menzionato nei commenti di charlietfl, un'opzione pulita sarebbe quella di aggiornare il servizio per restituire un formato di data già compatibile con i filtri angolari incorporati.

Tuttavia, se ciò non è possibile, è possibile impostare un filtro personalizzato per analizzare le date.

A (molto piccola) libreria che vi consiglio è Moment.js: http://momentjs.com/

Il seguente è un post sul blog esempio su come avvolgere Moment.js in un filtro angolare personalizzato: http://www.34m0.com/2012/07/angularjs-user-friendly-date-display.html

angular.module('myModule'). 
    filter('fromNow', function() { 
     return function(dateString) { 
      return moment(new Date(dateString)).fromNow() 
     }; 
    }); 

questo sarebbe stato utilizzato come:

{{ reply.createdDate | fromNow }} 
9

È possibile inserire questo nel vostro controller R:

$scope.toJsDate = function(str){ 
    if(!str)return null; 
    return new Date(str); 
    } 

e poi:

{{toJsDate(values.SomeDate)| date:'mediumTime' }} 
+0

facile, senza bisogno di altre librerie. Grazie! –

0

Vorrei secondo @ suggerimento di AlexOsborn utilizzare moment.js per creare un filtro personalizzato a causa moment.js posso analizzare la stringa contenente la data. Nella mia implementazione del filtro, ho anche delegare la formattazione data da moment.js perché mi sento moment.js' funzione di formattazione data è more comprehensive di angular.js':

angular 
.module("YourModuleNameHere") 
.filter("formatdate", [function() { 
    var result = function (date, formatstring) { 
     if(formatstring === null) { 
      formatstring = "DD MMM YYYY"; 
     } 
     return moment(date).format(formatstring); 
    } 
    return result; 
}]); 

e si utilizza solo come ci si utilizzare angular.js filtro data (ma per formattare la data usereste moment.js codici di formattazione):

<p>Today is {{moment() | formatdate}}</p> 
<p>Another date: {{values.SomeDate | formatdate:"ddd D MMM YYYY"}}</p>