CSS不能在AngularJS中动态更新

Question

我正在尝试制作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()，但没有运气

Answer 1

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

<强>标记

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