如何使用 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

progress无需访问的字段'{{'：

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

http://jsfiddle.net/gc343w7x/

Answer 2

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

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

就足够了。