JSFiddle - React, Tailwind, and code Playground

by jaimem

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!doctype html>
<html>
    <head></head>
<body ng-controller="foo">
    <form name="myForm">
        <textarea name = "mytextarea"
                  ng-maxlength="20" 
                  ng-change="change()"
                  ng-model="bar"></textarea>
         <span class="error" ng-show="myForm.mytextarea.$error.maxlength"> 
             Too long!
        </span>
        <span> {{left}} </span>
        <h1>{{bar}}</h1>

    </form>                 
</body>
</html>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

function foo($scope) {  
    $scope.change = function(){
        if($scope.bar){
           $scope.left = 20 - $scope.bar.length;            
        }else{
           $scope.left = "";
        }      
    };
    $scope.bar = 'Hello';
    $scope.change();
}