Angular：如果条件为真，如何更改单元格表的颜色

Posted 2023-02-21

【中文标题】Angular：如果条件为真，如何更改单元格表的颜色

【英文标题】：Angular: How to change the color of cell table if condition is true

【发布时间】：2014-03-24 18:01:17

【问题描述】：

我有一个对象，它有一个名为changeColor 的变量。在我的 html 表格中，如果 changeColor 为真，我想更改单元格颜色。我正在使用角度。

    <tr ng-repeat="list in results">
    <% if (!list.changeColor ) %>
    <%  %>
        <td bgcolor="red">list.value</td>
    <%  %>
    <td>list.price</td>

但经过测试它总是红色的，<% if (! ) %> <% %> <% %> 写在我的 html 页面中！你能帮帮我吗？

测试过这个

<td style=".red bgcolor: red; .black bgcolor: black;"
 ng-class='red : list.changeColor, black: !list.changeColor'>
 list.price</td>

但它不起作用

【参考方案1】：

不要在你的观点中加入太多逻辑。试试这个：

ngClass directive

它将允许您根据表达式更改 td 类。

【参考方案2】：

你必须使用ng-class

<tr ng-repeat="list in results">
    <td ng-class='red : list.changeColor, black: !list.changeColor'>list.value</td>
    <td>list.price</td>
</tr>

CSS

<style type="text/css">
.red 
    color: red; 


.black 
    color: black;

</style>

【讨论】：

感谢 Fizer Khan。 .js 文件应该是什么样子？我是角度新手

你不需要在 javascript 上做任何事情。我想，您只想通过布尔标志更改颜色。

我确实喜欢这个<td style=".red bgcolor: red; .black bgcolor: black;" ng-class='red : list.changeColor, white: !list.changeColor'>list.price</td> html 中的inspect 元素的输出就像ng-binding red 这是正确的但bgcolor 没有改变为什么？

内联样式错误。您必须将其放在样式标签内。我已经更新了答案。

【参考方案3】：

 <td ng-class="'negative':daily.MTDCompSales<0,'positive':daily.MTDCompSales>0">daily.MTDCompSales | number:0</td>

这行代码根据数据值变化，如果数据是正数或负数

【讨论】：

css 文件-.negative background-color: red .positive background-color:lime