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

时间:2014-02-23 05:34:40

标签: html angularjs html-table background-color

我有一个对象,它有一个名为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>

但它不起作用

3 个答案:

答案 0 :(得分:26)

您必须使用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>

答案 1 :(得分:6)

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

ngClass directive

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

答案 2 :(得分:0)

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

如果数据为正数或负数

,则此行代码会根据数据值更改