Question

我想在HTML中使用三元运算符动态决定CSS类。我使用下面的代码，但似乎根本没有评估条件。无论在条件的真实部分写出什么类，都适用。如何根据某些条件应用特定类？任何替代方法也会有所帮助。

<td class="col-md-6"><span class="form-control-static cdr-details-td" />
  <span class="(('1' === '-1') ? version-modal-header : failure)">{{cdr.causeCode}}</span> 
</td>

相同的CSS：

.version-modal-header {
  background-color: #000000;
}
.failure {
  color: #ff0000;
  font-weight: bold;
}

Answer 1

使用ng-class代替

ng-class="{'version-modal-header': condition, 'failure': !condition}"

如果需要，您还可以使用三元组

ng-class="condition ? 'version-modal-header' : 'failure'"

Answer 2

请在此处查看工作示例：Example

使用ng-class

 ng-class="{true: 'version-modal-header', false: 'failure'}[changeClass]"

您可以在 [changeClass]

中编写条件

Answer 3

您已合并到程序中的三元操作，不适用于friends_list或具体 - HTML DOM。它可以使用AngularJS来完成，因为它提供了一个精彩的内置class知道为directive。使用此项可以设置条件，根据需要应用ng-class。

请看下面的代码段：

class

查看演示here。

Answer 4

如果要动态应用css类，请使用ng-class。不要使用插值或绑定{{}}直接应用css类，因为它不能跨浏览器工作。在ng-class中，您只需要指定一个包含类名作为键的对象，并将相应的布尔条件指定为值。任何值的计算结果为true的类都是动态应用的。

<td class="col-md-6"><span class="form-control-static cdr-details-td" />
  <span ng-class="{'version-modal-header':('1' === '-1') , 'failure': ('1' !== '-1')}">{{cdr.causeCode}}</span> 
</td>

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 5

您可以使用它动态显示和隐藏内容

Answer 6

这里有一个对我有用的解决方案。

<p style={{borderBottom: loginToggle ? '6px solid blue' : "None"}}></p>

在HTML中使用三元运算符来决定要实现的类

6 个答案: