JSFiddle - React, Tailwind, and code Playground

by yufeng

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<div ng-controller="mainController">
	numValue is: {{numValue}}<br />
	<input ng-model="numValue" my-filter />
</div>

JavaScript

angular.module('myApp', [])
	.controller('mainController', ['$scope', 
		function ($scope) {
			$scope.numValue = 0;
	}])
	
	.directive('myFilter', [
		function() {
				return {
  				require: 'ngModel',
					link: function (elem, $scope, attrs, ngModel) {
						ngModel.$formatters.push(function (val) {
							return '$' + (val / 100).toFixed(2);
						});
						ngModel.$parsers.push(function (val) {
							//make sure the val is string
							val = val.toString();
							//filter the value for displaying, so keep the '$'
							var displayedValue = val.replace(/[^\d\.\$]/g, '');
							var replaced = val.replace(/[^\d\.]/g, '');
							var split = replaced.split('.');
							var merged = split[0] + split[1].slice(0, 2);
							var typeConverted = Number(merged);
							//update the $viewValue
              ngModel.$setViewValue(displayedValue);
              //reflect on the DOM element
              ngModel.$render();
							return typeConverted;
						});
					}
				}
			}
	]);

angular.element(document).ready(function() {
	angular.bootstrap(document, ['myApp']);
});