根據來自服務器的數據對錶應用顏色？

Question

假設-23％.... 0％.... 100％是我的數據。對於0％以上應顯示綠色陰影和紅色陰影。百分比越多，陰影應該越暗。反之亦然。

任何解決方案？

Answer 1

爲綠色色調，即積極的百分比 首先，我已經採取了最大百分比，並四捨五入到下一個第五多然後將該四捨五入的值除以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

Answer 2

使用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 
} 

添加同名類如果每次你想改變類值，則使用動態值或使用內嵌樣式