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

【问题标题】：Setting HTML element width using ng-style and percentage value in AngularJS在 AngularJS 中使用 ng-style 和百分比值设置 HTML 元素宽度
【发布时间】：2014-09-16 19:15:03
【问题描述】：

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

{
    completionPercent: 42
}

我想要的 UI 结果是：

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

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

【问题讨论】：

所以你不能只在对象中添加百分比开始吗？ {"completionPercent": "42%"}
@epascarello JSON 来自另一个服务。我可以在控制器中对其进行预处理并添加一个新的 String 属性，但我将其作为最后的手段。

标签： javascript css json angularjs data-binding

【解决方案1】：

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

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

【讨论】：

如果您发现自己在与 Angular 作斗争，请退后一步，认真思考您想要实现的目标。有很多方法可以用角度做事，这实际上是关于选择最适合情况的方法。知识会随着时间和经验而来。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

实现此目的的另一种方法是

[style.width.%]="completionPercent"

在您的代码中

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

【讨论】：

【解决方案4】：

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

1. Pixels -  [style.max-width.px]="value" 
2. EM - [style.max-width.em]="value"
3. Percent - [style.max-width.%]="value"

【讨论】：