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 }"

Solution 1

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>

Solution 2

Another way to achieve this is

[style.width.%]="completionPercent"

In your code

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

Solution 3

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" 

Solution 4

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.

View more solutions

Comments

[Andrew]

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.