Ho postato la stessa domanda in forma diversa, ma nessuno ha risposto. Non riesco a ottenere un’immagine chiara di ciò che fanno formattatori e parser in js angolari.
Con la definizione, sia Formatters che Parser sono simili a me. Forse mi sbaglio, visto che sono nuovo di questo angularjs.
Matrice di funzioni da eseguire, come una pipeline, ogni volta che cambia il valore del modello. Ogni funzione viene chiamata, a sua volta, passando il valore fino al successivo. Utilizzato per formattare / convertire i valori per la visualizzazione nel controllo e nella convalida.
Matrice di funzioni da eseguire, come una pipeline, ogni volta che il controllo legge il valore dal DOM. Ogni funzione viene chiamata, a sua volta, passando il valore fino al successivo. Utilizzato per disinfettare / convertire il valore e la convalida. Per la convalida, i parser devono aggiornare lo stato di validità utilizzando $ setValidity () e restituire undefined per valori non validi.
Per favore aiutami a capire entrambe le caratteristiche con un semplice esempio. Sarà apprezzata una semplice illustrazione di entrambi.
Questo argomento è stato trattato molto bene in una domanda correlata: come fare il filtro bidirezionale in AngularJS?
Riassumere:
Ecco un semplice esempio, basato su un esempio nella documentazione api di NgModelController :
//format text going to user (model to view) ngModel.$formatters.push(function(value) { return value.toUpperCase(); }); //format text from the user (view to model) ngModel.$parsers.push(function(value) { return value.toLowerCase(); });
Puoi vederlo in azione: http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy
Quando digiti un nome in (guarda per modellare), vedrai che il modello è sempre in minuscolo. Tuttavia, quando si fa clic su un pulsante e si modifica automaticamente il nome (modello da visualizzare), il campo di immissione è sempre in maiuscolo.
Un altro utilizzo per formattatori e parser è quando si vogliono memorizzare le date nell’ora UTC e visualizzarle in tempo locale sugli input, ho creato la direttiva datepicker e il filtro utcToLocal per questo.
(function () { 'use strict'; angular .module('app') .directive('datepicker', Directive); function Directive($filter) { return { require: 'ngModel', link: function (scope, element, attr, ngModel) { element.addClass('datepicker'); element.pickadate({ format: 'dd/mm/yyyy', editable: true }); // convert utc date to local for display ngModel.$formatters.push(function (utcDate) { if (!utcDate) return; return $filter('utcToLocal')(utcDate, 'dd/MM/yyyy'); }); // convert local date to utc for storage ngModel.$parsers.push(function (localDate) { if (!localDate) return; return moment(localDate, 'DD/MM/YYYY').utc().toISOString(); }); } }; } })();
Utilizza questo filtro utcToLocal che assicura che la data di input sia nel formato corretto prima di convertirsi all’ora locale.
(function () { 'use strict'; angular .module('app') .filter('utcToLocal', Filter); function Filter($filter) { return function (utcDateString, format) { if (!utcDateString) { return; } // append 'Z' to the date string to indicate UTC time if the timezone isn't already specified if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) { utcDateString += 'Z'; } return $filter('date')(utcDateString, format); }; } })();
moment.js è usato per convertire date locali in utc.
pickadate.js è il plugin datepicker usato