javascript - 我可以使用 JavaScript/AngularJS 使表格单元格中的数字根据其值具有不同的颜色吗

Question

我有一个 HTML 页面，其中包含一个使用 Angular ng-repeat 创建的表格和一个获取 JSON 数据的 Controller 。

这是我的表格的简化版本:

product  price
-------  -----
ABC      $1.33
EDF      $2.00

这是我的 HTML 页面中的 angularJS 代码:

<table class="table" ng-controller="someCtrl">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="p in products">
            <td>{{p.productName}}</td>
            <td>{{p.price}}</td>
        </tr>
    </tbody>
</table>

是否可以根据其值更改 p.price 的文本颜色？例如，我想用红色修改价格值 if p.price > 1.5

我尝试了以下答案，但只有当我硬编码数字而不是使用 ng-repeat 动态生成数字时它才有效: Can I make a table cell have a different background color if the value =< a particular number with jquery or PHP?

Answer 1

您可以通过 ng-class 代替 jQuery。

<td><span ng-class="p.price > 1.5 ? 'price-red' : ''">{{p.price}}</span></td>

CSS

.price-red {
    // apply your code like 
    color: red;
}