Grid with different colours for each cell - angularjs

Question

I'm new in AngularJS (1.6) and hope you can help me with this question.
I have a grid that grows the number of columns according to the selected date range. This table always has five rows below the header.
I need to create color conditions for each cell depending on the data base value. Something like validate my data before the grid, adding a status for each data, and apply a collor condition based on this status
Ex:
10/11 11/11 12/11 13/11
7% 8% 3% 9%
3% 2% 1% 4%
9% 7% 8% 3%
7% 8% 3% 9%
3% 2% 1% 4%
Controller
$scope.buscarDados = function (concessionaria, data_inicio, data_fim) {
$http({
method: 'POST',
data: { Concessionaria: concessionaria, DataInicio: data_inicio, DataFim: data_fim },
url: '/AnaliseDados/GerarJsonCabecalhoGrid'
})
.then(function (response) {
$scope.table_headers = response.data.table_headers;
}, function (error) {
console.log(error);
});
$http({
method: 'POST',
data: { Concessionaria: concessionaria, DataInicio: data_inicio, DataFim: data_fim },
url: '/AnaliseDados/buscaDadosPI'
})
.then(function (response) {
$scope.items = response.data.items;
}
)
};
View
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th ng-repeat="header in table_headers" class="{{header.name}}">
{{ header.name }}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat="val in item">{{item[table_headers[$index].name]}}</td>
</tr>
</tbody>
</table>
JSON
$scope.table_headers = [
{ "name": "id"},
{ "name": "01/08" },
{ "name": "02/08" },
{ "name": "03/08" },
{ "name": "04/08" },
{ "name": "05/08" }
];
$scope.items = [
{ "id": 1, "01/08": 10, "02/08": 13, "03/08": 22, "04/08": 26, "05/08": 33 },
{ "id": 2, "01/08": 12, "02/08": 15, "03/08": 24, "04/08": 28, "05/08": 35 },
{ "id": 3, "01/08": 14, "02/08": 17, "03/08": 26, "04/08": 30, "05/08": 37 },
{ "id": 4, "01/08": 16, "02/08": 19, "03/08": 28, "04/08": 32, "05/08": 39 },
{ "id": 5, "01/08": 18, "02/08": 21, "03/08": 30, "04/08": 35, "05/08": 41 },
{ "id": 6, "01/08": 20, "02/08": 23, "03/08": 32, "04/08": 37, "05/08": 43 }
];
populated itens

Answer 1

Not sure if I understood what you need. For what I have understood I think something like this may help you
<div ng-controller="MyCtrl">
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th ng-repeat="header in table_headers" class="{{header.name}}">
{{ header.name }}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat="val in item" ng-class="{'until-20' : item[table_headers[$index].name] <= 20, 'until-40' : item[table_headers[$index].name] > 20 && item[table_headers[$index].name] <= 40}">{{ item[table_headers[$index].name] }}</td>
</tr>
</tbody>
</table>
</div>
.until-20 {
background-color: red;
}
.until-40 {
background-color: yellow;
}
.until-60 {
background-color: green;
}
.until-80 {
background-color: blue;
}
.until-100 {
background-color: purple;
}
Obviously you must add remaining conditions.
Otherwise you can act more massively on css, like so:
<div ng-controller="MyCtrl">
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th ng-repeat="header in table_headers" class="{{header.name}}">
{{ header.name }}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat="val in item" class="value-{{item[table_headers[$index].name]}}">{{ item[table_headers[$index].name] }}</td>
</tr>
</tbody>
</table>
</div>
.value-0, .value-1, .value-2, .value-3, .value-4, .value-5, .value-6, .value-7, .value-8, .value-9, .value-10, .value-11, .value-12, .value-13, .value-14, .value-15, .value-16, .value-17, .value-18, .value-19, .value-20 {
background-color: red;
}
.value-21, .value-22, .value-23, .value-24, .value-25, .value-26, .value-27, .value-28, .value-29, .value-30, .value-31, .value-32, .value-33, .value-34, .value-35, .value-36, .value-37, .value-38, .value-39, .value-40 {
background-color: green;
}
Hope that helps

Answer 2

You can create different columns with different styles and change their visibility according to your condition
<th class="style1" ng-show="condition = condition1">
{{ header.name }}
</th>
<th class="style2" ng-show="condition = condition2">
{{ header.name }}
</th>
<th class="style3" ng-show="condition = condition3">
{{ header.name }}
</th>
or you can use a custom filter
html
<th ng-repeat="header in table_headers | filter: filterStyle" class="{{header.style}}">
{{ header.name }}
</th>
js
$scope.filterStyle = function (item) {
if (item.condition == 'condition1') {
item.style = 'style1';
}
else if (item.condition == 'condition2') {
item.style = 'style2';
}
else if (item.condition == 'condition3') {
item.style = 'style3';
}
else {
item.style = 'default style';
}
return true;
};

Answer 3

I would use ngClass and write an expression or even invoke a function that return the color class name given the item value:
<td ng-repeat="val in item" ng-class={'color-1': val < 10, 'color-2': val >= 10}>