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

Question

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

{
    completionPercent: 42
}

我的目标UI结果是:

????????????????????????????????????????????????????
|?????????????????????                             |
????????????????????????????????????????????????????

JSON对象用作ng-modelAngularJS中的元素.现在我想将它绑定completionPercent为AngularJS中元素的宽度.但CSS width期望一个String '42%',而不是一个数字.所以以下方法不起作用:

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

目前,我通过在控制器中生成整个样式来实现此功能:

ng-style="getStyleFromCompletionPercent()"

但这不是一个好主意,因为扩展它变得非常困难ng-style.还有另一种隐式指定宽度为百分比的方法吗？这样的事情是理想的:

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

Answer 1

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

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

Answer 2

实现这一目标的另一种方法是

[style.width.%]="completionPercent"

在你的代码中

<div id="progressBackground" ... >
<div id="progressBar"
     ng-model="..."
     [style.width.%]="completionPercent"
     ... ></div>

Answer 3

为了搜索者的利益,如果您需要填充该区域,但最后留下一些空间(例如,提供文本细节),可以通过类似于以下代码的方式实现:

<div ng-style="{'width': 'calc('+completionPercent+'% - 250px)'}">&nbsp;</div>

显然,这只适用于兼容CSS3的浏览器,但它可以动态扩展.

Answer 4

如果您想避免 Angular JS 应用程序中的观察者。我们可以使用以下语法：

1. 像素 - [style.max-width.px]="value"
2. EM - [style.max-width.em]="value"
3. 百分比 - [style.max-width.%]="value" " *