Setting HTML element width using ng-style and percentage value in AngularJS

Question

I have a JSON response object which contains a percentage value. For example:

{ completionPercent: 42 }

The UI result I'm aiming for is:

┌──────────────────────────────────────────────────┐ |█████████████████████ | └──────────────────────────────────────────────────┘

The JSON object is used as the ng-model of an element in AngularJS. Now I want to bind the completionPercent as the width of an element in AngularJS. But CSS width expects a String like '42%', not a Number. So the following does not work:

<div id="progressBackground" ... > <div id="progressBar" ng-model="..." ng-style="{ 'width': completionPercent }" ... ></div> </div>

Currently, I have this working by generating the entire style in the controller:

ng-style="getStyleFromCompletionPercent()"

But this is not a good idea, as it becomes very difficult to extend the ng-style. Is there another way to implicitly specify that the width is in percent? Something like this would be ideal:

ng-style="{ 'width-percentage': completionPercent }"

So can't you just add the percentage in the object to begin with? {"completionPercent": "42%"} — epascarello
– epascarello, Commented Jul 25, 2014 at 2:42
@epascarello The JSON comes from another service. I could pre-process it in the controller and add in a new String property, but I'd leave that as a last resort. — metacubed
– metacubed, Commented Jul 25, 2014 at 2:45

Andrew · Accepted Answer · 2014-07-25 02:41:33Z

The code within your ng-style attribute is a javascript object, so you could append a percentage symbol on the end of you width value. As you are appending a string to a number it will also convert the value of width to a string.

<div id="progressBackground" ... > <div id="progressBar" ng-model="..." ng-style="{ 'width': completionPercent + '%' }" ... ></div> </div>

If you find yourself fighting Angular, take a step back and really try to think about what you are trying to achieve. There are so many ways to do things in angular it's really about choosing what best suits the situation. The knowledge will come with time and experience.

Evita DAlmeida · Accepted Answer · 2019-06-06 18:56:42Z

Another way to achieve this is

[style.width.%]="completionPercent"

In your code

<div id="progressBackground" ... > <div id="progressBar" ng-model="..." [style.width.%]="completionPercent" ... ></div>

JJJCoder · Accepted Answer · 2015-10-01 12:46:37Z

For the benefit of searchers, if you needed to fill the area, but leave a bit of space at the end (for example, to provide textual detail), this could be achieved with something similar to the following code:

<div ng-style="{'width': 'calc('+completionPercent+'% - 250px)'}">&nbsp;</div>

Obviously, this would only work with CSS3 compliant browsers, but it scales well dynamically.

Sachin Mishra · Accepted Answer · 2021-12-23 17:49:14Z

In case of you would like to avoid watcher in Angular JS Application. We could make use of the following syntax :

1. Pixels - [style.max-width.px]="value" 2. EM - [style.max-width.em]="value" 3. Percent - [style.max-width.%]="value"

Collectives™ on Stack Overflow

Setting HTML element width using ng-style and percentage value in AngularJS

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related