Как динамически изменять класс CSS в соответствии с выражением angular

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

Я хочу изменить класс span css в соответствии с выражением angular.

если {{pirstatus}} == 'Door Closed' тогда class должен быть class="label label-success" , то он должен быть class="label label-danger"

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

Ответ №1:

Вы можете использовать привязку класса [class] как

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

Или вы можете использовать conditional как

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

Демонстрация Stackblitz, показывающая оба случая

Ответ №2:

Вы можете попробовать это, поскольку ищете код на AngularJS

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

* Не забудьте добавить пробел после метки в class="label "

Ответ №3:

Используйте [ngClass]

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

или

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

Ответ №4:

Просто используйте классы условий в AngularJS

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

Здесь a == true или a == false — это условие, которое вы хотите проверить.

Ответ №5:

Вы можете использовать conditional class :

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

или

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