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

你应该把你的速度变量放在你的 Controller 的范围内，这样每当速度发生变化时，angular 就会重新评估表达式并应用适当的类。正如亚历克西斯所说，使用

$scope.speed

将应用基于表达式的类。