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

【问题标题】：Angular: How to change the color of cell table if condition is trueAngular：如果条件为真，如何更改单元格表的颜色
【发布时间】：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>

但它不起作用

【问题讨论】：

标签： html angularjs html-table background-color

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