JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-controller="MyController as main">
  <input type="number" metric-imperial-input ng-model="main.convertedInches"> {{main.convertedInches}}
</div>

JavaScript

(function() {
    'use strict';

    angular
      .module('myApp', []);

    angular
      .module('myApp')
      .controller('MyController', MyController)
      .directive('metricImperialInput', metricImperialInput);

    MyController.$inject = [];

    function MyController() {
      this.convertedInches = 1;
    }
		
    metricImperialInput.$inject=['$parse'];
    function metricImperialInput($parse) {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
          var initVal = $parse(attrs.ngModel)(scope);
          modelCtrl.$viewValue = initVal;
          modelCtrl.$modelValue = initVal*25;
          debugger;
          modelCtrl.$render();

          modelCtrl.$parsers.push(function(inputValue) {
            var changedOutput = parseInt(inputValue) * 25;
            return parseInt(changedOutput) || 0;
          });
        }
      };
    };
}());