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

9 浏览
0 Comments

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

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

{

"completionPercent": 42

}

我希望的UI结果是：

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

这个JSON对象被用作AngularJS中一个元素的`ng-model`。现在我想把`completionPercent`绑定为AngularJS中一个元素的宽度。但是CSS的`width`属性需要一个像`'42%'`这样的字符串，而不是一个数字。所以下面的代码不起作用：

目前，我通过在控制器中生成整个样式来实现这个功能：

ng-style="getStyleFromCompletionPercent()"

但这不是一个好主意，因为这样很难扩展`ng-style`。是否有另一种隐式指定宽度为百分比的方法？像下面这样的方式是理想的：

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

0