如何使用ng-style设置元素宽度％的样式

Question

我想使用百分比来设置我的进度条的样式但是遵循ng文档我似乎无法掌握它。它应该是20％，但它是100％（默认）。

小提琴：http://jsfiddle.net/u6xp8csh/

这是我试过的

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

Answer 1

ng-style的内部被Javascript剥离，因此你有一个字符串'{{progress}}'后面紧跟着模数运算符%。

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

就足够了。

Answer 2

移动引号内的%。

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

Answer 3

progress字段无法使用'{{'：

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

http://jsfiddle.net/gc343w7x/

Answer 4

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

For More Detailes click here