当前位置: 首页 > 面试题库 >

AngularJS ng类if-else表达式

管翼
2023-03-14
问题内容

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

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

我想知道是否可以使用该if-else表达式执行与此类似的操作:

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

因此,无论何时call.State不同于firstsecond使用classC并避免指定每个值?


问题答案:

使用嵌套的嵌入式if-then语句( 三元运算符

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

例如 :

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

并确保 您的同事可读 :)



 类似资料:
  • Perl条件语句有助于决策,这需要程序员指定一个或多个要由程序评估或测试的条件,以及在条件被确定为真时要执行的一个或多个语句,以及可选的其他条件如果确定条件为假,则执行语句。 以下是大多数编程语言中的典型决策结构的一般性 - 数字0,字符串'0'和“”,空列表()和undef在布尔上下文中都是false ,所有其他值都为true 。 否定真正的价值! 或not返回特殊的假值。 Perl编程语言提供

  • 本文向大家介绍C# if, if...else, if... else if ,包括了C# if, if...else, if... else if 的使用技巧和注意事项,需要的朋友参考一下 示例 该if语句用于控制程序的流程。一条if语句根据Boolean表达式的值标识要运行的语句。 对于单个语句,braces{}是可选的,但建议使用。 该if还可以有一个else条款,将在案件条件的计算结果来执

  • 问题内容: 我可以在angularjs表达式中以某种方式使用if-then-else构造(三元运算符),例如,我有必须返回bool值的函数$ scope.isExists(item)。我想要这样的东西 我知道我可以使用返回字符串的函数,对于在表达式中使用if-then-else构造的可能性我很有趣。谢谢。 问题答案: 角表达式在1.1.5之前不支持三元运算符,但可以这样模拟: 因此,在示例中,类似

  • if语句之后可以跟一个可选的else if...else语句,这对于使用单个if ... else if语句测试各种条件非常有用。 当使用if...else if…else语句时,请记住 - 一个if可以有零个或一个else语句,它必须在任何其他if之后。 如果语句可以有零到多个if,它们必须在else之前。 一旦else if成功,其余的if或else语句都不会被测试。 if ... else

  • if语句后面可以跟一个else if...else语句,这对于使用单个if ... else if语句测试各种条件非常有用。 当使用if, else if, else语句时,要记住几点。 一个if可以有零个或一个else的,它必须在任何其他if之后。 一个if可以有零到多个else if是,他们必须在其他之前。 一旦else if成功, else if任何其他else if else不会被测试。

  • if语句构造可以有一个或多个可选的else-if构造。 当if条件失败时,紧接着执行else-if 。 当else-if也失败时,执行其后继else-if语句(如果有的话),依此类推。 可选的else放在最后,当上述任何条件都不成立时执行。 所有其他语句(else-if和else)都是可选的。 else-if可以使用一次或多次。 else必须始终放在构造的末尾,并且只能出现一次。 语法 (Synt