У меня возникла проблема с форматированием поля ввода, в результате чего основная переменная области неформатирована.
То, что я хочу достичь, - это текстовое поле для отображения валюты. Он должен отформатировать себя на лету, обрабатывая неправильный ввод. Я получил эту работу, но моя проблема в том, что я хочу сохранить неформатное значение в моей переменной области. Проблема со входом заключается в том, что для нее требуется модель, которая идет в обоих направлениях, поэтому изменение поля ввода обновляет модель и наоборот.
Я столкнулся с $parsers и $formatters, который, как представляется, я ищу. К сожалению, они не влияют друг на друга (что может быть полезно, чтобы избежать бесконечных циклов).
Я создал простой jsFiddle: http://jsfiddle.net/cruckie/yE8Yj/, и код выглядит следующим образом:
HTML:
<div data-ng-app="app" data-ng-controller="Ctrl">
<input type="text" data-currency="" data-ng-model="data" />
<div>Model: {{data}}</div>
</div>
JS:
var app = angular.module("app", []);
function Ctrl($scope) {
$scope.data = 1234567;
}
app.directive('currency', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attr, ctrl) {
ctrl.$formatters.push(function(modelValue) {
return modelValue.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
});
ctrl.$parsers.push(function(viewValue) {
return parseFloat(viewValue.replace(new RegExp(",", "g"), ''));
});
}
};
});
Опять же, это просто простой пример. Когда он загружает все выглядит так, как предполагалось. Поле ввода форматируется, а переменная - нет. Однако при изменении значения в поле ввода он больше не форматирует себя - переменная, однако, обновляется правильно.
Есть ли способ обеспечить форматирование текстового поля, пока переменная не является? Я предполагаю, что я ищу фильтр для текстовых полей, но я не вижу ничего в этом.
С наилучшими пожеланиями
