时间戳

首页 > 解决方案 > 为表格列的所有值着色文本

angularjs - 为表格列的所有值着色文本

问题描述

我有一个无法在内部更改的表格组件，但我需要读取 DOM 元素并将特定列中的负值涂成红色。所以假设我有一张这样的桌子：

<table id="mytable">
    <tr>
        <td>
            Person 1
        </td>
        <td>
            Address 1
        </td>
        <td>
            -2435
        </td>
    </tr>
    <tr>
        <td>
            Person 2
        </td>
        <td>
            Address 2
        </td>
        <td>
            432
        </td>
    </tr>
</table>

读取表格元素并为第 1 个人的金额的负值着色的最佳方法是什么？

标签： angularjs

解决方案

嗯，您是从 javascript 对象获取数据$http还是从 javascript$scope对象获取数据？如果是这样，您可以使用简单的ng-class HTML： 

<table id="mytable">
        <tr ng-repeat="data in data">
            <td>
               {{data.person}}
            </td>
            <td>
                {{data.adres}}
            </td>
            <td ng-class="{negative: data.number < 0}">
                 {{data.number}}
            </td>
        </tr>
    </table>

您的数据：

 $scope.data = [{
   "person" : "person 1",
   "adress" : "Adress 1",
   "number": 2432
 },{
   "person" : "person 2",
   "adress" : "Adress 2",
   "number": -123
 }]

风格：

.negative {
    color: red;
}

plunker：http ://plnkr.co/edit/MZlUk7LsfYlNQtsC8xea?p=preview

推荐阅读