ngModel格式器和parsing器

我以不同的forms发布了相同的问题,但没有人回答。 我没有清楚地知道格式化器和parsing器在angular度js中所做的事情。

根据定义,格式化器和parsing器看起来和我很相似。 也许我错了,因为我是新来的这个angularjs。

格式化程序定义

每当模型值发生变化时,作为pipe道执行的函数数组。 每个函数被调用,然后将值传递给下一个。 用于格式化/转换在控件和validation中显示的值。

parsing器定义

只要控件从DOM读取值,就可以作为pipe道执行这些函数的数组。 每个函数被调用,然后将值传递给下一个。 用于清理/转换值以及validation。 为了进行validation,parsing器应该使用$ setValidity()更新有效性状态,并为无效值返回undefined。

请用一个简单的例子来帮助我理解这两个特性。 两个简单的例子将不胜感激。

在一个相关的问题中,这个主题得到了很好的覆盖: 如何在angular.js中进行双向过滤?

总结:

  • 格式化程序会更改模型值在视图中的显示方式。
  • parsing器改变了视图值如何保存在模型中。

下面是一个简单的例子,build立在NgModelController api文档的一个例子上:

  //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(); }); 

你可以看到它的行动: http : //plnkr.co/UQ5q5FxyBzIeEjRYYVGX

 <input type="button" value="set to 'misko'" ng-click="data.name='misko'"/> <input type="button" value="set to 'MISKO'" ng-click="data.name='MISKO'"/> <input changecase ng-model="data.name" /> 

在(在模型中查看)键入名称时,您将看到模型总是小写。 但是,当您单击button并以编程方式更改名称(模型查看)时,input字段始终为大写。

格式化器和parsing器的另一个用法是当你想以UTC时间存储date,并在input当地时间显示它们时,我为此创build了下面的datepicker指令和utcToLocalfilter。

 (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(); }); } }; } })(); 

它使用这个utcToLocalfilter,确保在转换为本地时间之前inputdate格式正确。

 (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用于将本地转换为utcdate。

pickadate.js是使用的datepicker插件