JSFiddle - React, Tailwind, and code Playground

by benweizhu

HTML

<body ng-app="textSender">
    <div ng-controller="textLengthLimitController">
        <textarea ng-model="text"></textarea> <span ng-bind="remaining()"></span><br/>

        <input type="button" ng-disabled="!hasValidLength()" value="send" />
    </div>
</body>

JavaScript

angular.module("textSender", [])

.constant("MAX_LENGTH", 10)

.factory("lengthCal", function (MAX_LENGTH) {
    return {
        getMaxLength: function () {
            return MAX_LENGTH;
        }
    };
})

.controller("textLengthLimitController", function ($scope, lengthCal) {
    $scope.remaining = function () {
        return lengthCal.getMaxLength() - $scope.text.length;
    };
    $scope.hasValidLength = function () {
        return $scope.remaining() >= 0;
    };
});