Question

我正在使用ng-class根据单元格的值为特定单元格着色。

ng-class="{'score-cell green': value >= 70 ,                                                
'score-cell red': value <= 40,                                                
'score-cell yellow': value < 70 && value > 40}"

如何在this之类的范围之间切换？

它应该逐渐从红色变为黄色到绿色。

请建议。

请在这里找到这个plunkr。

https://plnkr.co/edit/0EjxhxxvzWpFRF49Pzp5?p=preview

Answer 1

请尝试使用ng-style。首先，您需要在绿色和红色（ HSV 颜色空间）范围内生成值。然后将其转换为十六进制值并使用background-color CSS添加它。您可以使用ng-repeat循环渲染它们。

以下是一个例子：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // your function for converting to Hex
  function toHex(n) {
    var r = 255 - (n / 10 * 255 | 0);
    g = n / 10 * 255 | 0;
    return '#' +
      (r ? (r = r.toString(16), r.length == 2 ? r : '0' + r) : '00') +
      (g ? (g = g.toString(16), g.length == 2 ? g : '0' + g) : '00') + '00'
  }

  var c = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  $scope.colors = c.map(function(x) {
    return toHex(x)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="c in colors track by $index" ng-style="{'background-color':c}">
    background-color: {{c}}
  </div>
</div>

动态平滑切换颜色

1 个答案: