Question

我在我的网站上使用AngularJS，并在我的某个网页上显示了一个小部件，并希望更改style标记中显示的某些文本的div元素，具体取决于是否为布尔值与该文本相关联的值为true或false。

在网页上引发警报，并在整数变量达到某个限制时显示在窗口小部件中（即，当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的值为true，则以一种颜色显示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") + "...

如何使用ngClass做if-else？

2 个答案: