Question

假设-23％.... 0％.... 100％是我的数据。对于0％以上，应显示绿色阴影，红色阴影以下。阴影应该更暗，因为百分比更多。反之亦然。

任何解决方案？

Answer 1

使用ng-class指令在条件

上添加类基础

对于前。

<强> HTML

<input ng-model="shadesVariable" />

<div ng-class="{'class-green': shadesVariable > 0, 'class-red': shadesVariable < 0}"></div>

在CSS中添加相同的名称类

.class-green {
   color: #808080
}
.class-red {
   color: #FF0000
}

如果您想每次更改类值，请使用动态值或使用内联样式

Answer 2

表示绿色阴影，即阳性百分比首先，我取最大百分比并舍入到下一个第5个多重值，然后将舍入值除以5。如果假设7.6是最高值，则舍入值将为10.因此10/5为2。在这之后创建一个数组。这里的数组将是[2,4,6,8]。现在我将每个百分比与应用阴影进行比较。

      var dataPositive = [0.12, 4.5, 6.6, 8.9, 0.34, 1.34, 5.6, 9.8, 18.45];
      var maxPositivePercent = Math.max(...dataPositive);
      var roundUpToClosestValue = Math.ceil(maxPositivePercent / 5);
        console.log(roundUpToClosestValue);

        $scope.candlePositive = [1,2,3,4,5];
        for(var i=0 ; i < $scope.candlePositive.length; i++ ) {
            $scope.candlePositive[i] =   $scope.candlePositive[i] 
           *roundUpToClosestValue;
          }
            $scope.candleColorPos = [
            '#C8FFC8',
            '#96FF96',
            '#57f702',
            '#59a033',
            '#2b7c01'
        ];

这是[链接] http://plnkr.co/edit/gaLEPX8n6efskp3I75bU?p=preview

根据来自服务器的数据将颜色应用于表格？

2 个答案: