使用ng-if和ng-style基于条件更改表格单元格文本颜色

时间:2017-03-15 07:10:40

标签: css angularjs html-table

我希望在具有替代颜色组合的表格单元格中显示文本,具体取决于某些条件,如下所示。

<tr ng-repeat="x in data">
<td>
<span ng-if="((x.time2 < x.time1) ||  (x.time2 < x.time3))" ng-style="color:red" {{x.val}}></span>
<span ng-if="((x.time2 === x.time1) &&  (x.time2 === x.time3)" ng-style="color:blue" {{x.val}}></span>
</td>
</tr>

但是我没有得到红色显示的值,尽管x.time2小于x.time1。采样时间值为time1 =“2017-03-15 06:06:56”,time2 =“2017-03-08 07:09:40”,time3 =“2017-03-08 07:09:40”。所有时间值都是字符串格式。

1 个答案:

答案 0 :(得分:1)

尝试以这种方式更改代码:

    <table>
        <tbody>
            <tr ng-repeat="x in data">
            <td>
            <span ng-if="x.time2 < x.time1 || x.time2 < x.time3" ng-style="{color: 'red'}" >{{x.val}}</span>
            <span ng-if="x.time2 === x.time1 && x.time2 === x.time3" ng-style="{color: 'blue'}" >{{x.val}}</span>
            </td>
            </tr>
        </tbody>
    </table>

我也将x.val移到了内...我不知道这是不是错误。