angularjs - 使用 Angular 基于计算应用 CSS

Question

我每隔几秒钟就有一次读数。

目前我正在使用阈值来确定动画应该何时发生：

<div ng-class="{'circle1': speed < 10, 'circle2': speed < 13 && speed >= 15, 'circle3': speed >= 15}"></div>

速度已经在自动更新，但目前 css 样式仅在超过 13 和 15 等时才会改变。相反，我希望它随着速度的变化而动态变化。所以 13.1 产生的圆比 13 大，而 13.2 比 13.1 大，依此类推。

circle1 {
    border-radius: 100px;
    height: 80px;
    width: 80px;
    left: 128px;
    position: relative;
    background: green;
}

是 circle1 的 CSS。我希望它根据速度不断地从绿色过渡到黄色。

Answer 1

你可以在你的控制器中定义你的速度

$scope.speed

并尝试影响您对该变量的持续时间。

要动态更改样式，请尝试在您的标记中定义样式：

<div class='circle' style='width:{{speed}}px;'></div>

Answer 2

这样的事情怎么样？

$scope.getSpeedClass = function() {
  var klass;
  if (speed <= 15) klass = 3;
  if (speed < 13) klass = 2;
  if (speed < 10) klass = 1;

  return klass;
}

<div class="circle{{getSpeedClass()}}"></div>

Answer 3

您应该将速度变量放在控制器的范围内，以便每当速度发生变化时，角度都会重新评估表达式并应用适当的类。正如亚历克西斯所说，使用

$scope.speed

并且将应用基于表达式的类。