ng-click中的三元表达式在angularjs中

Posted 2023-02-23

【中文标题】ng-click中的三元表达式在angularjs中

【英文标题】：ternary expression in ng-click in angularjs

【发布时间】：2014-08-10 09:10:45

【问题描述】：

我想知道是否可以在 ng-click 属性中使用三元表达式。 如果可能，我不想使用单独的控制器功能。

这是一个双按钮切换设置 - 我可以让一个简单的切换工作，但不希望再次单击“关闭”按钮重新打开。

ng-click 中的三元组不起作用（注意 ng-class 中的三元组起作用）：

<button
    ng-click="allOn2==true ? allOn2 : !allOn2"
    ng-class="allOn2==true ? 'btn-green-on' : 'btn-green-off'">
ON</button>

这是一个更完整的 jsfiddle： toggler

【问题讨论】：

为什么不直接使用 ng-switch？

尚未了解 ng-switch，但通过简短的检查，它似乎更像是一个多选 ng-show/hide。谢谢

【参考方案1】：

你没有对三元表达式做任何事情。为了它有用，分配它：

 var1   var2
<button
    ng-click="var1 = (allOn2==true ? allOn2 : !allOn2)"
    ng-class="'btn-green-on':allOn2, 'btn-green-off' : !allOn2">
ON</button>

我不确定如何将三元表达式用于 ng-class...

【讨论】：

啊...你是对的。我的小提琴没有显示任何我绑定了 allOn 值的 ng-model，就像在我的项目中一样。但我明白为什么你的建议有效。我想我很困惑，因为 ng-class 要求你“什么都不做”，即只评估表达式以找到类。我需要让 on-click 显式设置 allOn 的值，我认为这只是通过对表达式的评估而发生的。谢谢！

这里是更新小提琴的链接：link

在三元中检查布尔值有点多余。 allOn2==true ? allOn2 : !allOn2 可以是 allOn2 = !allOn2。

【参考方案2】：

您可以使用某些东西作为三元的解决方法

 ng-click="(AppliedApps!=null && Collapse('CollapsedAppliedApplications')) || 
(AppliedApps.length==0 && Collapse('CollapsedAppliedApplications'))">