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插件
