JSFiddle - React, Tailwind, and code Playground

by BuriB

HTML

<!doctype html>
<html lang="en">
<head>
</head>
<body ng-app="app" ng-controller="TestCntrl">
<input type="text" id="exampleInput" name="input" ng-model="value" number-formatter/><br/>
<strong>value in the model:</strong> {{value}}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript">
  angular.module('app', [])
      .controller('TestCntrl', function TestCntrl ($scope) {
        $scope.value = 50000;
      })
      .directive('numberFormatter', ['$filter', function ($filter) {
        var decimalCases = 2,
            whatToSet = function (str) {
             var num = numb !== null ? numb : 0; 
                var numbe = num !== undefined ? num : 0;

                if (separator === ',') {
                    var str = numbe.toString();
                    str = str.replace(',', '.');
                    numbe = parseFloat(str);
                }
                return numbe;
            },
            whatToShow = function (num) {
              return '$' + $filter('number')(num, decimalCases);
            };

        return {
          restrict: 'A',
          require: 'ngModel',
          link: function (scope, element, attr, ngModel) {
            ngModel.$parsers.push(whatToSet);
            ngModel.$formatters.push(whatToShow);

            element.bind('blur', function() {
              element.val(whatToShow(ngModel.$modelValue))
            });
            element.bind('focus', function () {
              element.val(ngModel.$modelValue);
            });
          }
        };
      }]);
</script>
</body>
</html>