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;
}

For the future, try google first. "ng-class multiple" has a top result of http://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class — Chris G, Jun 30 '16 at 20:30

score 3 · Answer 1 · answered Jun 30 '16 at 20:22

3

You can do it without a function like so

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

a codepen showing

answered Jun 30 '16 at 20:22

Michael

653
6
19

score 1 · Answer 2 · answered Jun 30 '16 at 20:13

I believe you wanted to add class on field based on value entered, You could use ng-class with function which will decide which class will get applied.

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

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

score 1 · Answer 3 · answered Jun 30 '16 at 20:23

1

try this

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

answered Jun 30 '16 at 20:23

Hadi J

16,989
4
36
62

score 1 · Accepted Answer · answered Jun 30 '16 at 20:26

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"/>

answered Jun 30 '16 at 20:26

Chris G

359
2
9

apply css dynamically in angularjs

4 Answers4