CSS not dynamically updating in AngularJS

Question

I'm trying to make 2 div's with their width set by an angularJS value (0 - 100) so I did this:

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

but the width is calculated on the initial value of videoRating. When I change that value, it won't update the style.

Any suggestions on how to do this?

I tried adding ng-cloak and $scope.$apply() but no luck

Pankaj Parkar · Accepted Answer · 2015-04-29 13:43:49Z

5

ng-style should not use {{}} interpolation directive, you could use direct scope variables there.

Markup

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

answered Apr 29, 2015 at 13:43

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The contents of an ng-style are (key,value) pairs such that the value is a "truthy" expression