javascript - 在 AngularJS 中使用 ng-style 和百分比值设置 HTML 元素宽度

Question

我有一个包含百分比值的 JSON 响应对象。例如:

{
    completionPercent: 42
}

我想要的 UI 结果是:

┌──────────────────────────────────────────────────┐
|█████████████████████                             |
└──────────────────────────────────────────────────┘

JSON 对象用作 AngularJS 中元素的 ng-model。现在我想将 completionPercent 绑定(bind)为 AngularJS 中元素的宽度。但是 CSS width 需要像 '42%' 这样的字符串，而不是数字。所以下面的不起作用:

<div id="progressBackground" ... >
    <div id="progressBar"
         ng-model="..."
         ng-style="{ 'width': completionPercent }"
         ... ></div>
</div>

目前，我通过在 Controller 中生成整个样式来实现这一点:

ng-style="getStyleFromCompletionPercent()"

但这不是一个好主意，因为扩展 ng-style 变得非常困难。是否有另一种方法可以隐式指定宽度为百分比？像这样的东西是理想的:

ng-style="{ 'width-percentage': completionPercent }"

Answer 1

您的 ng-style 属性中的代码是一个 javascript 对象，因此您可以在宽度值的末尾附加一个百分比符号。当您将字符串附加到数字时，它也会将宽度的值转换为字符串。

<div id="progressBackground" ... >
    <div id="progressBar"
         ng-model="..."
         ng-style="{ 'width': completionPercent + '%' }"
         ... ></div>
</div>