Input type number in AngularJS

Question

I have a input type number in AngularJS as follows...

<input type="number"></input>

I want to achieve the following:

• If user enters a positive value, it should display the same font and color

• If the user displays a negative value, it should display font color in red indicating it is a negative number

Can someone please let me know how to achieve this dynamically?

Answer 1

You could do this.

HTML

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

CSS

.negative {
   color: red;
}
.positive {
    color: green;
}