每个单元格具有不同颜色的网格

Question

我是 AngularJS (1.6) 的新手，希望你能帮助我解决这个问题。

我有一个根据所选日期范围增加列数的网格。此表在标题下方始终有五行。

我需要根据数据库值为每个单元格创建颜色条件。比如在网格之前验证我的数据，为每个数据添加一个状态，并根据这个状态应用颜色条件

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 }
]; 

populated itens

Answer 1

不确定我是否了解您的需求。据我了解，我认为这样的事情可能会对您有所帮助

<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;
}

希望有帮助

Answer 2

您可以创建具有不同样式的不同列，并根据您的条件更改它们的可见性

<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;
};

Answer 3

我会使用ngClass 并编写一个表达式，甚至调用一个函数来返回给定项目值的颜色类名称：

<td ng-repeat="val in item" ng-class={'color-1': val < 10, 'color-2': val >= 10}>