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 stackoverflow.com/questions/18871277/… — Chris G
– Chris G, Commented Jun 30, 2016 at 20:30

Michael · Accepted Answer · 2016-06-30 20:22:45Z

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, 2016 at 20:22

Michael

6536 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris G · Accepted Answer · 2016-06-30 20:26:23Z

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, 2016 at 20:26

Chris G

3692 silver badges9 bronze badges

Comments

Pankaj Parkar · Accepted Answer · 2016-06-30 20:13:55Z

1

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

answered Jun 30, 2016 at 20:13

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Hadi · Accepted Answer · 2016-06-30 20:23:34Z

1

try this

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

answered Jun 30, 2016 at 20:23

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

apply css dynamically in angularjs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related