Formato <input> para mostrar la moneda como types de usuario

Estoy buscando una forma de formatear un elemento de input para formatear para la moneda. Específicamente quiero las comas allí por miles.

La solución inicial fue simplemente formatear el valor en el controller y devolverlo a la vista. Pero luego para hacer mis cálculos tengo que quitar todo eso de nuevo. Luego encontré $formatters y $parsers para ngModelController . Básicamente, le permite crear funciones de canalización. El primero formatea el valor para el usuario. El segundo analiza el valor que se utilizará en el controller. Precisamente lo que quiero.

Mi solución solo funciona en la carga de la página. Mira mi violín .

 myApp.directive('thousandsformatter', function ($filter) { return { require: 'ngModel', link: function (scope, element, attrs, ctrl) { ctrl.$formatters.push(function (data) { var formatted = $filter('currency')(data); console.log(formatted); //convert data from model format to view format return formatted; //converted }); ctrl.$parsers.push(function (data) { console.log(data); //convert data from view format to model format return data; //converted }); } }; }); 

¿Cómo puedo actualizar esto a medida que el usuario escribe?

He hecho un ajuste en la function de análisis y ahora está funcionando como lo desea.

 myApp.directive('thousandsformatter', function ($filter) { var precision = 2; return { require: 'ngModel', link: function (scope, element, attrs, ctrl) { ctrl.$formatters.push(function (data) { var formatted = $filter('currency')(data); console.log(formatted); //convert data from model format to view format return formatted; //converted }); ctrl.$parsers.push(function (data) { var plainNumber = data.replace(/[^\d|\-+|\+]/g, ''); var length = plainNumber.length; var intValue = plainNumber.substring(0,length-precision); var decimalValue = plainNumber.substring(length-precision,length) var plainNumberWithDecimal = intValue + '.' + decimalValue; //convert data from view format to model format var formatted = $filter('currency')(plainNumberWithDecimal); element.val(formatted); return Number(plainNumberWithDecimal); }); } }; }); 

Mira mi solución en violín .

Espero que ayude

Aclamaciones