Установка ширины элемента HTML с использованием ng-стиля и процентного значения в AngularJS

У меня есть объект ответа JSON, который содержит процентное значение. Например:

{
    completionPercent: 42
}

Результат пользовательского интерфейса, на который я нацелен:

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

Объект JSON используется как ng-model элемента в AngularJS. Теперь я хочу привязать completionPercent как ширину элемента в AngularJS. Но CSS width ожидает String как '42%', а не Number. Таким образом, следующий не работает:

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

В настоящее время я работаю, создавая весь стиль в контроллере:

ng-style="getStyleFromCompletionPercent()"

Но это не очень хорошая идея, так как очень трудно расширить ng-style. Есть ли другой способ неявно указать, что ширина в процентах? Что-то вроде этого было бы идеальным:

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

Ответ 1

Код в вашем атрибуте ng-style - это объект javascript, поэтому вы можете добавить символ процента в конце значения ширины. Когда вы добавляете строку в число, она также преобразует значение ширины в строку.

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

Ответ 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>