javascript - How to style element width % using ng-style - Stack Overflow

admin管理员组

文章数量:1201559

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: /

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

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

• javascript
• angularjs

Share Improve this question Follow asked Dec 8, 2014 at 13:10 StanStan 26.5k5555 gold badges168168 silver badges247247 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 11

progress field accessible without '{{':

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

http://jsfiddle.net/gc343w7x/

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.

Move the % inside of the quotes.

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

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

For More Detailes click here

本文标签： javascriptHow to style element widthusing ngstyleStack Overflow