Mastering Web Application

Chapter 1

The preceding requirements are not particularly challenging and describe a fairly
standard text form. Nevertheless, there are many UI elements to coordinate here
such as we need to make sure that the button's disabled state is managed correctly,
the number of remaining characters is accurate and displayed with an appropriate
style, and so on. The very first implementation attempt looks as follows:

<div class="container" ng-controller="TextAreaWithLimitCtrl">

<div class="row">

<textarea ng-model="message">{{message}}</textarea>

</div>

<div class="row">

<button ng-click="send()">Send</button>

<button ng-click="clear()">Clear</button>

</div>

</div>

Let's use the preceding code as a starting point and build on top of it. Firstly, we
need to display the number of remaining characters, which is easy enough, as
given in the following code:

<span>Remaining: {{remaining()}}</span>

The remaining() function is defined in the TextAreaWithLimitCtrl controller
on the $scope as follows:

$scope.remaining = function () {

return MAX_LEN - $scope.message.length;

};

Next, we need to disable the Send button if a message doesn't comply with the
required length constraints. This can be easily done with a little help from the
ng-disabled directive as follows:

<button ng-disabled="!hasValidLength()"...>Send</button>