我是AngularJS(1.6)的新成员,希望你能帮我解决这个问题。
我有一个根据所选日期范围增加列数的网格。此表始终在标题下方五行。
我需要根据数据库值为每个单元格创建颜色条件。类似于在网格之前验证我的数据,为每个数据添加状态,以及根据此状态应用collor条件
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%
控制器
$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;
}
)
};
查看
<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 }
];
答案 0 :(得分:0)
不确定我是否了解您的需求。根据我的理解,我认为这样的事情可能会对你有所帮助
<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;
}
显然你必须添加剩余条件。
否则你可以在css上采取更大规模的行动,如下:
<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;
}
希望有所帮助
答案 1 :(得分:0)
您可以根据条件创建具有不同样式的不同列并更改其可见性
<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>
或者您可以使用自定义过滤器
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;
};
答案 2 :(得分:0)
我会使用ngClass并编写一个表达式,甚至可以调用一个函数来返回给定项值的颜色类名:
<td ng-repeat="val in item" ng-class={'color-1': val < 10, 'color-2': val >= 10}>