如何使用 ngClass 做 if-else？

Question

我在我的网站上使用 AngularJS，我的一个网页上显示了一个小部件，我想更改 div 中显示的某些文本的 style 元素标签取决于与该文本关联的布尔值是真还是假。

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

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

显示此 'alarm' 文本的 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

您可以使用三元运算符来实现此目的。

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

Answer 2

当您在模板中使用 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>

如何使用 ngClass 做 if-else？

How to do an if-else using ngClass?

html

javascript

css

angularjs

ng-class