ng-class with multiple conditions

Question

I want to show the class based on the value present in it.

ng-if="data.percentage >= 0  & data.percentage < 25"
ng-if="data.percentage >= 25 & data.percentage < 50"
ng-if="data.percentage >= 50 & data.percentage < 75"
ng-if="data.percentage >= 75 & data.percentage <= 100"

.firstLabel
.secondLabel
.thirdLabel
.fourthLabel

For example, if the value in data.percentage is 75 then my output div should look like this.

<div ng-class="fourthLabel" > </div>

help is appriciated thanks.

Answer 1

You need to combine them all in a single ng-class like so.

This will apply the class corresponding to the condition which is true.

<div ng-class="{'firstLabel': data.percentage >= 0  & data.percentage < 25, 'secondLabel':data.percentage >= 25 & data.percentage < 50, 'thirdLabel': data.percentage >= 50 & data.percentage < 75, 'fourthLabel':data.percentage >= 75 & data.percentage <= 100 }" > </div>