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

【问题标题】：Using ternary operator in HTML to decide on the class to be implemented在 HTML 中使用三元运算符来决定要实现的类
【发布时间】：2022-04-08 17:47:29
【问题描述】：

我想在 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;
}

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

改用ng-class

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

如果你愿意，你也可以使用三元组

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

【讨论】：

谢谢，我可以使用三元运算符来做到这一点。我已经准备好了条件，只需要用 ng-class 替换 class。
ng-class 与三元运算符确实使工作变得简单。伟大的代码菲尔！

【解决方案2】：

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

使用 ng-class

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

你可以在[changeClass]

中写下你的条件

【讨论】：

@User2 这是一些很棒的附加信息。也理清了一些概念。谢谢。

【解决方案3】：

您在程序中合并的 三元运算 不适用于 class 或特定的 HTML DOM。它可以使用 AngularJS 来完成，因为它提供了一个很棒的内置 directive，称为 ng-class。使用这个可以设置条件，根据这些条件需要申请class。

看看下面的sn-p：

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

查看演示 here。

【讨论】：

谢谢@Shashank。这很有帮助。

【解决方案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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

如果您在 .net 视图页面的样式属性中寻找三元运算符，那么以下答案将适合您。

style ="background-color: @(Model.IsVisible ? "#fde0e0;" : "#DFF0D8;")"

【讨论】：