我正在使用angularjs ng-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
是黑色的默认颜色。
答案 0 :(得分:3)
使用ng-class和CSS:
HTML
<td data-title="'lastPrice'" ng-class="{ red: item.lastPrice < item.price_alert }">
${{item.lastPrice}}
</td>
CSS
.red { color: red; }