如何使用 ngClass 执行 if-else？

Question

我在我的网站上使用 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的值；如果为假，则显示它是另一种颜色...我该怎么做？

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

Answer 2

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

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