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

86

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>

answered Jul 25, 2014 at 2:41

Andrew

5,7455 gold badges39 silver badges42 bronze badges

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

1 Comment

Andrew Over a year ago

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

15

Another way to achieve this is

[style.width.%]="completionPercent"

In your code

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

answered Jun 6, 2019 at 18:56

Evita DAlmeida

1511 silver badge5 bronze badges

Comments

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

7

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.

answered Oct 1, 2015 at 12:46

JJJCoder

17.1k19 gold badges106 silver badges130 bronze badges

Comments

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

7

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"

edited Dec 23, 2021 at 17:49

answered Aug 9, 2019 at 13:14

Sachin Mishra

1,1931 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related