JSFiddle - React, Tailwind, and code Playground

by Pankaj Parkar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-controller="fessCntrl">Example
  <input type="text" ng-model="test" only-digits/> <pre>{{test|json}}</pre>

</div>

JavaScript

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function($scope) {
  $scope.test = 123456879;

});

fessmodule.$inject = ['$scope'];


fessmodule.directive('onlyDigits', function() {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attr, ctrl) {
      function inputValue(val) {
      console.log("formatter")
        if (val) {
          var digits = val.replace(/[^0-9.]/g, '');

          if (digits !== val) {
            ctrl.$setViewValue(digits);
            ctrl.$render();
          }
          return parseFloat(digits);
        }
        return undefined;
      }
      ctrl.$parsers.push(inputValue);

      function formatter(value) {
        console.log("formatter")
        if (value) {
          return value.;
        }
      }
      ctrl.$formatters.push(formatter);
    }
  }
});;