CODEWITHSUNDEEP
javascriptcssangularjsng-style
Kiwi
Kiwi

Reputation: 2773

CSS not dynamically updating in AngularJS

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

Upvotes: 2

Views: 478

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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>

Upvotes: 5

Related Questions