Ошибка синтаксиса: символ «%» не разрешен в строке

Question

Я пытаюсь создать индикатор выполнения, значение прогресса которого вычисляется с помощью простой функции в файле углового контроллера, а затем отправляется в элемент html в атрибут стиля.

Вот часть AngularJS файла:

var statusMock = { 
    installmentProgress: { 
      current: '2', 
      outOf: '4' 
     } 
} 
var installmentProgressBarLength = ((statusMock.installmentProgress.current/statusMock.installmentProgress.outOf).toString() * 100); 
ctrl.progressValue = 'progresValue={width:' + installmentProgressBarLength + '%}'; 

А вот часть HTML файла:

<div class="tile-policy-payments__installments-progress__progressbar" > 
    <div class="tile-policy-payments__installments-progress__progressbar_value" ng-style="{{ctrl.progressValue}}"></div> 
</div> 

Проблема символ "%" в упр. progressValue определение. Это приводит к ошибке:

Error: [$parse:syntax] Syntax Error: Token '}' not a primary expression at column 24 of the expression [progresValue={width:50%}] starting at [}]. 

Если я не использую символ «%» все работает нормально, однако длина прогресс бар не один, что я ожидал.

Был бы благодарен за помощь в решении этой проблемы. С уважением

Answer 1

Вам нужно изменить две вещи, чтобы заставить их работать. При установке переменной в JS, вы должны установить его непосредственно к объекту:

ctrl.progressValue = { width: installmentProgressBarLength + '%' }; 

Вторая часть меняется связыванию:

ng-style="ctrl.progressValue" 

Обратите внимание, что нет никаких фигурных скобок вокруг значения. Это потому, что то, что вы действительно хотите передать в ng-style, является объектом, а не представлением JSON этого объекта.