ngModel Formatters and Parsers

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.

Definizione di formattatori

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.

Definizione di parser

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:

  • I formattatori cambiano il modo in cui i valori del modello appariranno nella vista.
  • I parser modificano il modo in cui i valori della vista verranno salvati nel modello.

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