CSS没有在AngularJS中动态更新

Posted 2023-03-06

【中文标题】CSS没有在AngularJS中动态更新

【英文标题】：CSS not dynamically updating in AngularJS

【发布时间】：2015-07-08 20:11:45

【问题描述】：

我正在尝试制作 2 个 div，它们的宽度由 angularJS 值 (0 - 100) 设置，所以我这样做了：

<span class="green" ng-style="width: 'videoRating%'"</span>
<span class="red" ng-style="width: '100-videoRating%'"></span>

但宽度是根据 videoRating 的初始值计算的。当我更改该值时，它不会更新样式。

关于如何做到这一点的任何建议？

我尝试添加 ng-cloak 和 $scope.$apply() 但没有成功

【问题讨论】：

请分享您更新值的代码。

【参考方案1】：

ng-style 不应该使用 插值指令，你可以在那里使用直接范围变量。

标记

<span class="green" ng-style="width: videoRating + '%'"</span>
<span class="red" ng-style="width: (100 - videoRating) + '%'"></span>

【讨论】：

ng-style 的内容是 (key,value) 对，因此值是“真实”的表达式