Question

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

{
    completionPercent: 42
}

我瞄准的用户界面结果是：

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

JSON对象用作AngularJS中元素的ng-model。现在我想将completionPercent绑定为AngularJS中元素的宽度。但CSS width需要一个像'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

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

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

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

Answer 3

如果您想避免在Angular JS应用程序中使用监视程序。我们可以使用以下语法：

1。像素-[style.max-width.px] =“ value”
2. EM-[style.max-width.em] =“ value”
3.百分比-[style.max-width。％] =“ value”

Answer 4

另一种实现方法是

[style.width.%]="completionPercent"

在您的代码中

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

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

4 个答案: