语法错误：字符串中不允许使用符号“％”

Question

我正在尝试创建一个进度条，使用Angular控制器文件中的简单函数计算进度值，然后将其发送到html元素到style属性。

以下是 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>

问题是ctrl.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表示。