How to set multiple conditions to style in angularjs

Question

I have a table. I want to set different colors depending on the values of one of the columns. I have managed to set two colors using NgClass. But how can I set three different conditions.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<tr ng-class="{{project.total >= 0}} ? 'danger':'success'">

  <td>
    {{project.total}}

  </td>
</tr>

I want three conditions, if total is less than 35, color should be red, between 35 and 70 ; yellow and above 70 should be green. How can i do this with angular. I am very new to angular.

Why not set a variable on scope in controller and use it in template? — Vishwanath, Mar 07 '15 at 14:50

score 2 · Accepted Answer · edited May 23 '17 at 12:12

You can pass an object as a value of ng-class.

From the documentation :

If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

Your object will be something like that :

{
    'red': project.total < 35,
    'yellow': project.total >= 35 && project.total < 70,
    'green': project.total >= 70
}

Therefore, your html is :

<tr ng-class="{ 'red': project.total < 35, 'yellow': project.total >= 35 && project.total < 70, 'green': project.total >= 70 }">

Edit: See demo fiddle

However, because of angular's digest mechanism you should keep only simple conditions in your templates. The resulting class computation could be deported in the controller, and you would have only :

<tr ng-class="{{project.class}}">

'yellow': project.total >= 35 and project.total < 70, and is giving errors — butYouDontLookLikeADeveloper, Mar 07 '15 at 15:13
It is a typo, it should have been `project.total >= 35 && project.total < 70`. Was correct in [fiddle](http://jsfiddle.net/4o84asho/) — Michel, Mar 07 '15 at 15:19

score 1 · Answer 2 · answered Mar 07 '15 at 14:53

1

<tr ng-class="{'red': project.total <35  , 'yellow':project.total >= 35 && project.total<70,'green': project.total >= 70 } ">

answered Mar 07 '15 at 14:53

Srinath Mandava

3,384
2
24
37

score 1 · Answer 3 · answered Mar 07 '15 at 14:54

1

Really, you should do work this complicated in a controller rather than the HTML, but if you insist, you could do this:

<tr ng-class="project.total < 35 ? 'danger': (project.total < 71 ? 'partial' : 'success')">

answered Mar 07 '15 at 14:54

Michael Lorton

43,060
26
103
144

1

How would I do this in my controller, I am very new to angular I didnt know I could do the same in controller – butYouDontLookLikeADeveloper Mar 07 '15 at 15:07
Read the docs for [ngController](https://docs.angularjs.org/api/ng/directive/ngController). Yours is the entirely standard case for a controller. – Michael Lorton Mar 07 '15 at 18:27

How to set multiple conditions to style in angularjs

3 Answers3