使用 angularjs ng-table 根据特定条件更改文本颜色

Question

我正在使用 angularjs ng-table 模块在 table.

中显示值

相关的 html 代码如下所示；

<div ng-controller="ViewCtrl" class="container">
    <table ng-table="tableParams" class="table table-bordered">
        <thead>

        <tr>            
            <th>id</th>            
            <th>price_alert</th>
            <th>lastPrice</th>
        </tr>

        <thead>
        <tbody>
        <tr ng-repeat="item in $data">
            <td data-title="'id'">
                {{item.id}}
            </td>
            <td data-title="'price_alert'">
                ${{item.price_alert}}
            </td>
            <td data-title="'lastPrice'">
                ${{item.lastPrice}}
            </td>
        </tr>
        </tbody>
        </tbody>
    </table>
</div>

控制器代码如下所示；

controller('ViewCtrl', ['$scope', '$http', 'moment', 'ngTableParams',
        function ($scope, $http, $timeout, $window, $configuration, $moment, ngTableParams) {
            var tableData = [];
            //Table configuration
            $scope.tableParams = new ngTableParams({
                page: 1,
                count: 100
            },{
                total:tableData.length,
                //Returns the data for rendering
                getData : function($defer,params){
                    var url = 'http://127.0.0.1/list';
                    $http.get(url).then(function(response) {
                        tableData = response.data;
                        $defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                        params.total(tableData.length);
                    });
                }
            });
        }])

我希望 lastPrice 的颜色在满足 lastPrice < price_alert 条件时变为红色。否则，lastPrice 是默认颜色，即黑色。

Answer 1

class 和 CSS 的使用：

HTML

<td data-title="'lastPrice'" ng-class="{ red: item.lastPrice < item.price_alert }">
    ${{item.lastPrice}}
</td>

CSS

.red { color: red; }

使用 angularjs ng-table 根据特定条件更改文本颜色

Make color of text change depending on certain condition with angularjs ng-table

javascript

colors

angularjs

ngtable