javascript - IE浏览器的Angular JS中绑定(bind)样式值

Question

我正在使用进度条，其 slider 值是从API应用的，为此我使用sytles来控制 slider ，代码部分如下所示，在chrome和firefox中一切正常。但是当我尝试在 IE 中运行时，进度条值不显示

<span class="progress-bar triggers" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: {{Math.round(KPIData.triggers * 100)}}%;"> </span>

Answer 1

为此使用 ngStyle，请参阅 API reference .

ngStyle 接受键(属性名称)和值(它们应该采用的值，空字符串取消设置它们)的字典，而不仅仅是字符串。我想你想要的是这样的:

<span class="progress-bar triggers" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" ng-style="{ 'width' : width}"></span>

然后在你的 Controller 中:

$scope.width = Math.round(KPIData.triggers * 100)+'%';

这保留了模板和 Controller 的分离: Controller 保存语义值，而模板将它们映射到正确的属性名称。