我在 CSS 中定義了 3 種顏色。在 HTML 中，我有表格，我希望單元格的背景顏色根據 3 個條件進行更改：
if cell contains the text 'True' - color green
if cell contains the text 'False' - color red
if the cell contains the text 'None' - color yellow
我的CSS：
.color-green {
background-color: green;
color: black;
}
.color-yellow {
background-color: orange;
color: black;
}
.color-red {
background-color: red;
color: black;
}
我的html：
<td ng-class = "{'color-yellow':dict.status='True','color-red':dict.status=='false'}">{{ dict.status}}</td>
我首先嘗試了 2 種顏色，但這只是將我的單元格更改為帶有紅色背景的 True。我很長時間沒有接觸過 html，但我記得這種方法適用于數字。試圖谷歌但不是那么幸運:(
有什么方法可以用 3 種顏色做我想做的事嗎？
uj5u.com熱心網友回復：
條件（三元）運算子可用于此目標。更多資訊： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
以下代碼使用類，{{ }}然后使用三元運算子。如果dict.status.includes('True')回傳 true 則類等于color-greenelse ifdict.status.includes('False')回傳 true 則類等于color-red并且 else 類變為color-yellow。
class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}
.color-green {
background-color: green;
color: black;
}
.color-yellow {
background-color: yellow;
color: black;
}
.color-red {
background-color: red;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="">
Type your text in this box:
<input type="text" ng-model="dict.status">
<table>
<tr>
<td class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}">{{ dict.status}}</td>
</tr>
</table>
</div>uj5u.com熱心網友回復：
我認為您可以嘗試使用指令 [ngClass] ：
<td [ngClass] = "{'color-yellow':dict.status='true','color-red':dict.status=='false'}">{{ dict.status}}</td>
您可以在其中將類分配給使用它的元素。
游樂場鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414283.html
標籤：
下一篇：如何移動范圍內的文本