Javascript 如何使用ngClass执行if-else？

我在我的网站上使用AngularJS，并且在我的一个网页上显示了一个小部件，我想根据与该文本相关联的布尔值是真还是假来更改

div

标记中显示的某些文本的

样式

元素

当整数变量达到某个限制时（即当x>=100时，

AlarmRised

布尔值设置为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>'

指令（'tagBox'，函数（$timeout，tag，colorfilter）{
返回{
限制：'E'，
范围：{
...
},
模板：。。。
...
“{{alarm.message.value}}”

---

在上面的

标记中，我想使用一些内嵌的JS来表示：“如果

alarm.accepted.value

的值为true，则以一种颜色显示

alarm.message.value

的值；如果为false，则以另一种颜色显示它……我将如何做到这一点？

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

---

。+（alarm.accepted.value？“文本警告”：“文本危险”）+“…

当您在模板中使用ngClass时，您可能需要在以下位置使用三元运算符：

...

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

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

...

或：

...

？

条件？值为真时：值为假时

您可以为文本警告和文本危险添加颜色classes@someone2088小心，没有

{}

在Trialum的Syntax中。@someone2088您必须在字符串中转义一些

”

：

“

您可以使用这个jsfiddler来查看一个工作示例，啊，我的错-我只是刚刚开始这个项目，而我不能让它按照您的建议工作的原因似乎是因为我在其他地方引用了错误的变量。谢谢你的帮助

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