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

Question

我想根据角度表达式更改span css类。

如果是{{pirstatus}} == 'Door Closed'那么类应该是class="label label-success"否则应该是class="label label-danger"

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

Answer 1

您可以将类绑定[class]用作

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

或者，您可以将条件用作

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

堆栈闪电战演示显示这两种情况

Answer 2

你可以尝试这个，因为你正在寻找AngularJs代码

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

*不要忘记在class="label "标签后添加空格

Answer 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>

Answer 4

只需使用 AngularJS 中的条件类

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

在这里，a ==

true 或 a == false 是您要检查的条件。

Answer 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>