2013-03-28 13 views
25

Ho una textarea contenente un messaggio da pubblicare e una span con il numero di caratteri ancora disponibili.ng-class non applicata

<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, maxMessageLength e messageLengthAlertTreshold sono tutti definiti nel $scope, e il contatore all'interno dell'estensione viene aggiornato correttamente quando inserisco testo nella textarea, cambiando il valore di messageText.length.

Tuttavia, né la classe css message-lengthmessage-length-alert vengono mai applicate alla mia span, indipendentemente dal valore contenuto in messageText.

Ho anche provato a rimuovere il controllo per message-length-alert lasciando l'attributo ng-class con solo {message-length: true}, ma non è comunque applicato.

Cosa mi manca?

risposta

68

Prova a racchiudere il nome della classe tra virgolette. Invece

ng-class="{message-length-alert: (messageText.length > messageLengthAlertTreshold), message-length: true} 

Prova

ng-class="{'message-length-alert': (messageText.length > messageLengthAlertTreshold), 'message-length': true} 

è perché chiave hash deve essere un nome di stringa o una variabile-like. (Scusa per il cattivo inglese)

+2

È necessario solo racchiudere il nome della classe tra virgolette se c'è un trattino nel nome della classe. Altrimenti non ti serve questo. – Sprose

Problemi correlati