JSFiddle - React, Tailwind, and code Playground

by abhaga

HTML

<div ng:app="myApp">
    <div ng:controller="Ctrl">
        <input type="percent" ng-Model="var" name="var" percent>
        <pre>var = {{var|json}}</pre>
    </div>
</div>

JavaScript

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

myApp.directive("percent", function($filter){
    var p = function(viewValue){
        var m = viewValue.match(/^(\d+)\/(\d+)/);
        if (m != null)
          return $filter('number')(parseInt(m[1])/parseInt(m[2]), 2);
        return $filter('number')(parseFloat(viewValue)/100, 2);
    };

    var f = function(modelValue){
        return $filter('number')(parseFloat(modelValue)*100, 2);
    };
    
    return {
        require: 'ngModel',
        link: function(scope, ele, attr, ctrl){
            ctrl.$parsers.unshift(p);
            ctrl.$formatters.unshift(f);
        }
    };
});

function Ctrl($scope) {
    $scope.var = "1.0";
}