Update view with formatted value, model with numeric value - angularjs

Question

I have a need for input boxes to display values formatted based on the user's locale but the model must store the value in en-US locale and all of this happens on blur. I've got the formatting of the fields working when the user clicks off of them but I cannot figure out how to set the model value. In my code formatedValue is being set correctly for the user to view but how do I update the model value to be "valueToFormat"? I've tried
scope.$modelValue = valueToFormat;
and it works when watching it thru the debugger but as soon as the view is rendered the value reverts to the $viewValue. How can I accomplish this?
element.bind('blur', function () {
var val = ctrl.$modelValue;
parse(val);
})
ctrl.$formatters.push(function(value) {
if(!value) {
return value;
}
var valueToFormat = getActualValue(value, decimalDelimiter, thousandsDelimiter, decimals, '%') || '0';
return viewMask.apply(prepareNumberToFormatter(valueToFormat, decimals));
});
function parse(value) {
if(!value) {
return value;
}
var valueToFormat = getActualValue(value, decimalDelimiter, thousandsDelimiter, decimals) || '0';
var formatedValue = viewMask.apply(prepareNumberToFormatter(valueToFormat, decimals));
var actualNumber = parseFloat(modelMask.apply(valueToFormat));
ctrl.$viewValue = formatedValue;
ctrl.$render();
return valueToFormat;
}

Answer 1

You should be able to use a filter to solve this issue. For example this is a date filter that we use. This is with typescript so a little tweaking will be necessary for straight java-script but it gets the point across.
app.filter('MyDateFilter', ['$filter', function ($filter: ng.IFilterService)
{
return function (value:any, format)
{
if (typeof value == "string")
{
var stringValue = <string>value;
//If there is no / or - then assume its not a date
if (stringValue.indexOf('/') == -1 && stringValue.indexOf('-') == -1)
return value;
}
var parsedDate = Date.parse(value);
if (isNaN(parsedDate))
return value;
else
return $filter('date')(value, format);
}
}]);
And then in the html.
<div ng-repeat="value in values" >
{{value | MyDateFilter:"MM/dd/yyyy" }}
</div>
Since it seems like you want to change an input display value. here is a solution we use for that. I created a custom directive and inside of there you can manipulte the $render. So:
app.directive("myDateDisplayInput", ['$filter', function DatepickerDirective(filter: ng.IFilterService): ng.IDirective
{
return {
restrict: 'A',
require: 'ngModel',
link: (scope: ng.IScope, element, attrs, ngModelCtrl: ng.INgModelController) =>
{
ngModelCtrl.$render = () =>
{
var date = ngModelCtrl.$modelValue ?
filter('date')(ngModelCtrl.$modelValue, "MM/dd/yyyy") :
ngModelCtrl.$viewValue;
jqueryElement.val(date);
};
}
};
}
This will format the value to be what you want. If you only want this to happen on blur then you add
ng-model-options="{ updateOn: 'blur' }"
<input type="text" my-date-display-input ng-model-options="{ updateOn: 'blur' }" ng-model="unformattedDate"/>
Some pieces might be missing but this should get the idea across.