2013-03-28 17 views
25

Ich habe ein Textfeld, das eine Nachricht enthält, die gepostet werden soll, und eine Spanne mit der Anzahl der noch verfügbaren Zeichen.ng-Klasse wird nicht angewendet

<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 und messageLengthAlertTreshold sind alle in den $scope definiert ist, und der Zähler innerhalb der Spanne korrekt aktualisiert, wenn I Text in dem Textfeld einfügen, um den Wert von messageText.length änderte.

Jedoch werden weder die css-Klasse message-length noch message-length-alert jemals auf meinen Bereich angewendet, unabhängig von dem in messageText enthaltenen Wert.

Ich habe auch versucht, die Prüfung für message-length-alert zu entfernen das ng-Klasse-Attribut mit nur {message-length: true} verlassen, aber es wird trotzdem nicht angewendet.

Was fehlt mir?

Antwort

68

Versuchen Sie, den Klassennamen in Anführungszeichen zu schreiben. Statt

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

Versuchen

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

Es wird da Hash-Schlüssel ein String oder variabel wie Name sein muss. (Entschuldigung für schlechtes Englisch)

+2

Sie müssen den Klassennamen nur in Anführungszeichen setzen, wenn der Klassenname einen Bindestrich enthält. Sonst brauchst du das nicht. – Sprose

Verwandte Themen