apply css dynamically in angularjs

Question

I have the following input.

HTML is as follows.

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

CSS is as follows

 .negative {
         color: red;
 }

If the amount is positive, it will display no css, if the amount is negative, it will use .negative as its css and display the font in red color.

However i want the positive class to show up when the amount is positive in number.

Can someone let me know how to satisfy both the positive and negative values.

Here is the css for positive.

.positive {
         color: blue;
}

Answer 1

Alternatively, you could have a complex ng-class.

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