JSFiddle - React, Tailwind, and code Playground

by csbenjamin

HTML

<div ng-app="demo" ng-init="" ng-controller="Demo">
    
    <div>
        <button ng-click="loadData1()">Load Data -- all caps</button>
        <button ng-click="loadData2()">Load Data -- all lowercase</button>
    </div>
   
    <input type="text" lowercase ng-model="data.var1"></input>
    
    <input type="text" lowercase ng-model="data.var2"></input>
    
    <p>
    <code>
        {{ data }}
    </code>
    </p>
    
</div>

CSS

input { display: block; }

JavaScript

var module = angular.module("demo", []);

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            
            function fromUser(text) {
                alert(text);
                return (text || '').toUpperCase();
            }

            function toUser(text) {
                alert(text);
                return (text || '').toLowerCase();
            }
          
            ngModel.$parsers.push(fromUser);
            ngModel.$formatters.push(toUser);
        }
    };
});

function Demo($scope) {

    $scope.data = {
        var1: 'VALUE 1',
        var2: 'VALUE 2'
    };
    
    $scope.loadData1 = function() {
        $scope.data = {
            var1: 'ABCDEF',
            var2: 'GHJ ILK12345'
        };
    };
    
    $scope.loadData2 = function() {
        $scope.data = {
            var1: 'hdsdfjh',
            var2: 'please talk quietly in the library'
        };
    };
 
}