如何使用 ngClass 执行 if-else？

Posted 2023-03-06

【中文标题】如何使用 ngClass 执行 if-else？

【英文标题】：How to do an if-else using ngClass?

【发布时间】：2017-11-30 07:12:40

【问题描述】：

我在我的网站上使用 AngularJS，并在我的一个网页上显示了一个小部件，并且想要更改 div 标记中显示的某些文本的 style 元素，具体取决于是否有与之关联的布尔值文字是真还是假。

当整数变量达到一定限制时（即当 x >= 100 时，alarmRaised 布尔值设置为 true），网页上会发出警报，并在小部件中显示警报。变量的值始终显示在页面上，并且每 30 秒更新一次。

发出警报时，会发出警告（并显示在单独的页面上）- 用户可以选择接受该警告。当警告被接受时，我希望显示变量值的文本以一种颜色显示，如果没有，我想以另一种颜色显示。

显示此“警报”文本的 html 位于该页面的 JS 函数之一中：

.directive('tagBox', function($timeout, tag, colourFilter)
    return
        restrict: 'E',
        scope: 
            ...
        ,
        template: ...
            ...
            '<div data-ng-repeat="alarm in alarms" data-ng-class="\'text-warning\':alarm.accepted.value, \'text-danger\':!alarm.accepted.value">alarm.message.value</div>'

在上面的<div></div>标签里面，我想用一些内嵌的JS说：“如果alarm.accepted.value的值为真，则以一种颜色显示alarm.message.value的值；如果为假，则显示它是另一种颜色...我该怎么做？

【问题讨论】：

conditional (ternary) operator? condition ? value-when-true : value-when-false

你可以为你的文本警告和文本危险类添加颜色

【参考方案1】：

当您在模板中使用 ngClass 时，您可能希望在 ngClass 中使用三元运算符：

<div ng-class="alarm.accepted.value ? 'text-warning' : 'text-danger'">
    ...
</div>

请注意，它从 Angular 1.1.4 开始工作。如果您使用的是 Angular 1.1.1，则不支持三元运算符。您可以改用：

<div ng-class="'text-warning': alarm.accepted.value, 'text-danger': !alarm.accepted.value">
    ...
</div>

或者：

<div ng-class="true:'text-warning', false:'text-danger'[alarm.accepted.value]">
    ...
</div>

【讨论】：

@someone2088 注意三元的合成器中没有。 Related issue here

@someone2088 你必须在你的字符串中转义一些'：'<div data-ng-class="alarm.accepted.value ? \'text-warning\' : \'text-danger\'">'

您可以使用这个 jsfiddler 查看一个工作示例，jsfiddle.net/suunyz3e/1418

啊，我的错-我刚刚接手了这个项目，看来我无法按照你的建议让它工作的原因是因为我在其他地方引用了错误的变量......感谢您的帮助

【参考方案2】：

您可以使用三元运算符来实现这一点。

.." + (alarm.accepted.value ? "text-warning" : "text-danger") + "...