I have a textarea containing a message to be posted and a span with the number of characters still available.
<textarea name="" cols="" rows="" maxLength="{{maxMessageLength}}" ng-model="messageText"/>
<div id="chatmessage-buttons">
<a ng-click="sendMessage()"><span>Invia</span></a>
<span ng-class="{message-length-alert: (messageText.length > messageLengthAlertTreshold), message-length: true}">{{maxMessageLength - messageText.length}}</span>
</div>
messageText, maxMessageLengthand messageLengthAlertTresholdare all defined in the $scope, and the counter inside the span is updated correctly when I insert text in the textarea, changing the value of messageText.length.
However, neither the css class message-lengthnor message-length-alertare ever applied to my span, regardless of the value contained in messageText.
I also tried removing the check for message-length-alert leaving the ng-class attribute with just {message-length: true}, but it's not applied anyway.
What am I missing?
Answer
Try to wrap the class name in quotes. Instead of:
ng-class="{message-length-alert: (messageText.length > messageLengthAlertTreshold), message-length: true}
Try:
ng-class="{'message-length-alert': (messageText.length > messageLengthAlertTreshold), 'message-length': true}
It is because the hash key must be a string or variable-like name.