2016-06-30 13 views
1

Ich habe folgende Eingabe.wenden css dynamisch in angularjs

HTML ist wie folgt.

<input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> 

CSS ist als

.negative { 
     color: red; 
} 

folgt Wenn die Menge positiv ist, wird es keine CSS angezeigt werden, wenn der Betrag negativ ist, wird es Negatives als CSS verwenden und die Schrift in rot angezeigt werden Farbe.

Allerdings möchte ich die positive Klasse zeigen, wenn die Menge positiv ist.

Kann mir jemand sagen, wie man die positiven und negativen Werte erfüllt.

Hier ist das CSS für positiv.

.positive { 
     color: blue; 
} 
+0

Für die Zukunft, versuchen Sie zuerst google. "ng-class multiple" hat ein Top-Ergebnis von http://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class –

Antwort

1

Alternativ können Sie eine komplexe ng-Klasse.

<input type="number" class="positive" ng-class="{'negative': amount < 0, 'positive': amount > 0, 'zero': amount == 0}" ng-model="amount"/>

1

Ich glaube, Sie Klasse auf dem Feld hinzufügen wollte basierend auf dem Wert eingegeben, könnten Sie ng-class mit function verwenden, die angewendet, die Klasse wird entscheiden, erhalten.

<input type="number" ng-class="decideClass(amount)" ng-model="amount"/> 

$scope.decideClass = function(value){ 
    return value => 0 ? 'positive': 'negative'; 
} 
3

Sie können es tun, ohne eine Funktion wie so

<input type="number" ng-class="{positive: amount >= 0, negative: amount < 0}" ng-model="amount"/>  

ein codepen zeigt

1

versuchen, diese

<input type="number" ng-class="{'positive': amount >= 0, 'negative': amount < 0}" ng-model="amount"/>