ng-class not being applied

Question

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 1

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.