javascript - 语法错误: symbol "%" not allowed in string

Question

我正在尝试创建一个进度条，其进度值是通过 Angular Controller 文件中的简单函数计算的，然后将其发送到 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 + '%' };

第二部分是更改绑定(bind):

ng-style="ctrl.progressValue"

请注意，该值周围没有大括号。这是因为您实际上想要传递给 ng-style 的是一个对象，而不是该对象的 JSON 表示形式。