CODEWITHSUNDEEP
javascriptangularjs
Stan
Stan

Reputation: 26511

How to style element width % using ng-style

I want to style my progress bar using with percentages but following ng documentation I can't seem to grasp it. It should be 20% with, but it's 100% (default).

Fiddle: http://jsfiddle.net/u6xp8csh/

Here is what I have tried

HTML

<div data-ng-app>
    <div data-ng-controller="ProgressBarController">
        <div class="progress-bar-container">
            <div class="progress-bar" ng-style="{'width' : '{{ progress }}'% }">{{ progress }}</div>
        </div>
    </div>
</div>

JS

function ProgressBarController($scope) {
    $scope.progress = 20;
}

CSS

.progress-bar-container {
    width: 300px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid black;
}
.progress-bar {
    height: 100px;
    background-color: green;
}

Upvotes: 9

Views: 16635

Answers (4)

Abdi Abdi
Abdi Abdi

Reputation: 11

 <p class="bar" [style.width.%]="value">
        <span>Helo The World</span>
    </p>

For More Detailes click here

Upvotes: 1

Rasalom
Rasalom

Reputation: 3111

progress field accessible without '{{':

 ng-style="{'width' : progress + '%' }"

http://jsfiddle.net/gc343w7x/

Upvotes: 11

David Souther
David Souther

Reputation: 8184

The inside of the ng-style is stripped down Javascript, so you have a string '{{progress}}' immediately followed by the modulus operator %.

ng-style="{width: progress + '%'}"

will suffice.

Upvotes: 5

Remco Haszing
Remco Haszing

Reputation: 7849

Move the % inside of the quotes.

ng-style="{'width' : '{{ progress }}%' }">

Upvotes: 2

Related Questions