我可以使用JavaScript / AngularJS使表格單元格中的數字基於其值具有不同的顏色

Question

我有一個HTML頁面，其中包含使用Angular ng-repeat創建的表和一個獲取JSON數據的控制器。

這是我的表的簡化版本：

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對數字進行硬編碼而不是動態生成數字時才有效： 如果值= <具有jquery的特定數字，或者我可以使表格單元具有不同的背景顏色PHP？

Answer 1

而不是jQuery，你可以通過ng-class實現這一目標。

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

CSS

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

Answer 2

更簡潔的方法是在angularjs中使用ng-class指令。 對於標記，您可以選擇根據表達式的值提供css類，如下所示：

<td ng-class="{ 'css-cls-for-color1' : p.price > 3000, 'css-cls-for-color2' : p.price <= 3000}"> </td>