0

Trying to update the ng-style attribute for width based on the response that I get when the app first loads. Right now I am able to grab the data (count) that I need but I am trying to bind this count to a style of the progress as well.

Right now I have:

 <div class="bar-warning" ng-style="{width: 20+'%'}"></div>
 <div class="bar-success" ng-style="{width: 43+'%'}"></div>

Which is just static and I am showing the count using this:

<span class="submitCount">{{getTaskCount("VIEW")}}&nbsp;Complete</span>
<span class="reviewCount">{{getTaskCount("REVIEW")}}&nbsp;IN REVIEW</span>
<span class="todoCount">{{getTaskCount("PROVIDE") + getTaskCount("SIGN")}}&nbsp;TO DO</span></p>

So I want to try and do something like this:

<div class="bar-warning" ng-style="{width: {getTaskCount("VIEW")*10}+'%'}"></div>

So that I could get a width of something like 32% or 58% which would be used to adjust the css width property.

There's a lot of functionality bound to this so too much to fiddle just wondering if anyone has a good solution for updating ng-style like this. Any help is appreciated.

isaac weathers
  • 1,436
  • 4
  • 27
  • 52
  • 1
    Your quotes and braces look wrong. How about `ng-style="{width: getTaskCount('VIEW') * 10 + '%'}"`. You can also just use `style="width: {{getTaskCount('VIEW') * 10}}%"` – Phil Mar 24 '15 at 06:05
  • That actually worked pretty good. Thanks. Now just gotta factor the equation and figure out how to get the third span added together for the two different counts. Thanks man. – isaac weathers Mar 24 '15 at 06:27
  • http://stackoverflow.com/users/283366/phil Please put in the answer so I can give you credit. I'll have to factor out an equation but that got me past the first part. Thanks again. – isaac weathers Mar 24 '15 at 06:39

0 Answers0