如何根据角度表达式动态更改CSS类

Question

I want to change the span css class according to the angular expression.

if {{pirstatus}} == 'Door Closed' then class should be class="label label-success" else it should be class="label label-danger"

<span class="label label-success" style="font-size:large">{{pirstatus}}</span>

Answer 1

You can try this as you are looking for AngularJs code

<span class="label " ng-class="$pirstatus === 'Door Closed'? 'label-success': 'label-danger'>{{pirstatus}}</span>

*Dont forget to add a space after label in class="label "

Answer 2

Use [ngClass]

<span class="label " [ngClass]="pirstatus === 'Door Closed'? 'label-success':
 'label-danger'">{{pirstatus}}</span>

OR

<span class="label " [ngClass]="'label-success':pirstatus === 'Door
 Closed','label-danger':pirstatus !== 'Door Closed'">{{pirstatus}}</span>

Answer 3

You can use class binding [class] as

<span [class]="pirstatus == 'Door Closed' ? 'label label-success' : 'label label-danger'" 
style="font-size:large">{{pirstatus}}</span>

Or, you can use conditional as

<span class="label" [class.label-success]="pirstatus == 'Door Closed'" 
[class.label-danger]="pirstatus !== 'Door Closed'" style="font-size:large">
{{pirstatus}}</span>

Stackblitz Demo showing both cases

Answer 4

Simply go with the condition classes in AngularJS

<span ng-class="{'class1':a==true,'class2':a==false }" style="font-size:large">{{pirstatus}}</span>

Here a == true or a == false is the condition you want to check.

Answer 5

You can use conditional class :

<span class="label {{pirstatus === 'Door Closed'? 'label-success': 'label-
danger'}}"  style="font-size:large">{{pirstatus}}</span>

OR

<span class="label" ng-class="{true:'label-success', false: 'label-danger'}
[pirstatus === 'Door Closed']" style="font-size:large">{{pirstatus}}</span>