AngularJS ng-class if-else 表达式 [英] AngularJS ng-class if-else expression

问题描述

使用 AngularJS 我使用 ng-class 的方式如下:

<div class="bigIcon" data-ng-click="PickUp()"ng-class="{first:'classA', second:'classB', 第三个:'classC', 第四个:'classC'}[call.State]"/>

我想知道是否可以使用 if-else 表达式来做类似的事情:

<div class="bigIcon" data-ng-click="PickUp()"ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

所以每当 call.State 与 first 或 second 不同时，使用 classC 并避免指定每个值?

解决方案

使用嵌套内联 if-then 语句 (三元运算符)

例如:

<div ng-class="apt.name.length >= 15 ?'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">...

并确保它您的同事可读 :)

With AngularJS I'm using ng-class the following way:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

I'm wondering if I can use the if-else expression to do something similar to this:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

So whenever call.State differs from first or second use classC and avoid specifying each value?

解决方案

Use nested inline if-then statements (Ternary Operators)

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

for example :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

And make sure it's readable by your colleagues :)

这篇关于AngularJS ng-class if-else 表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！