AngularJS - Applying ng-class based on numbers

Question

I understand how to use ng-class for boolean values, e.g:

<div ng-class="{true: 'success', false: 'error'}[IsPositive]">

However, how do i perform based on a numeric value?

For example, if i have a $scope.myNumber, which can be any positive or negative value e.g.

-212

or

-31

or

0

or

31

or

123

How can i use an ng-class to apply 3 types of classes, that is, when:

$scope.myNumber > 0
$scope.myNumber < 0
$scope.myNumber == 0

Have a look at this question for some answers: http://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression — mfdoran, Jul 23 '14 at 13:22

AlwaysALearner · Accepted Answer · 2014-07-23T13:27:32.363

3

<div ng-class="{'zero' : myNumber == 0, 
'negative' : myNumber < 0, 
'positive' : myNumber > 0}">

edited Jul 23 '14 at 13:27

answered Jul 23 '14 at 13:21

AlwaysALearner

score 3 · Answer 2 · answered Jul 23 '14 at 13:28

3

Example:

 <div ng-class="{'one': myNumber > 5 && myNumber < 10, 'two' : myNumber > 10, 'three' : myNumber < 5, 'equal' : myNumber === 0}"></div>

answered Jul 23 '14 at 13:28

igorzg

score 1 · Answer 3 · answered Jul 23 '14 at 13:24

1

Try this?

<div ng-class="{'green':myNumber>0,'red':myNumber<0,'orange':myNumber==0}"> </div>

answered Jul 23 '14 at 13:24

thomasnu

3 Answers3