angular multiple boolean conditions with associated classes

Question

I'm trying to have different classes based on the state, how's it possible to have different classes based on different conditions?

<i ng-class="'iconA': state == 100, 'iconB': state == 200, 'iconC': state == 300"></i>

score 1 · Answer 1 · answered Oct 03 '15 at 00:52

1

I think you might just be missing some curly brackets just inside your double quotes - could you try this?

<i ng-class="{
  'iconA': state == 100,
  'iconB': state == 200,
  'iconC': state == 300
}"></i>

We did something very similar recently which worked well for us:

<button class="date-picker__day" ng-class="{
  'date-picker__day--this-month': ctrl.isActiveMonthForDay(day),
  'is-selected': ctrl.isSelectedDay(day),
  'is-active': ctrl.isActiveDay(day),
  'is-today': ctrl.isToday(day),
  'is-disabled': !ctrl.isDateAllowed(day),
}"></button>

answered Oct 03 '15 at 00:52

samjewell

1,068
11
20

what if the value `100` in the above example is in inside another variable, for instance `state == states.DOWNLOADING` and `DOWNLOADING` is 100 – user2727195 Oct 03 '15 at 00:58
1

As long as `states` is defined on your current scope, you can use it exactly as you wrote it. – Anid Monsur Oct 03 '15 at 01:00

score 0 · Answer 2 · answered Oct 03 '15 at 00:48

From the Angular docs for ngClass:

The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

What you already have is close to a map. You just need to wrap it in braces.

<i ng-class="{'iconA': state == 100, 'iconB': state == 200, 'iconC': state == 300}"></i>

please see my comment in one of the answers – user2727195 Oct 03 '15 at 00:58 — user2727195, Oct 03 '15 at 00:58

angular multiple boolean conditions with associated classes

2 Answers2