宽度的引导进度条样式不适用于角度 js 绑定变量答案

【问题标题】：bootstrap progress bar style for width is not working with angular js bound variable宽度的引导进度条样式不适用于角度 js 绑定变量
【发布时间】：2014-07-12 03:22:31
【问题描述】：

进度条宽度没有被 IE 中的角度范围绑定的变量更新。

我希望有一个进度条长度由角度范围内的变量更新，因为我已经尝试直接在内联样式元素中使用角度表达式，也尝试使用 ng-style 属性。

它在 Firefox 和 Chrome 中正常工作，而在 IE 上它无法设置进度条的宽度。

查看IE中“div”元素的元素如下图所示

Inline Style { width : {{value}}% }

我的理解是，表达式没有在 Internet Explorer 的样式属性中得到评估。

你可以在这个fiddle找到完整的测试脚本

只是想知道在结合使用引导程序和角度时是否有人遇到过同样的问题。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

你应该使用 ng-style

http://jsfiddle.net/un8B5/

html:

ng-style="myStyle"

js:

$scope.myStyle = {width: $scope.value + '%'};

【讨论】：

非常感谢它确实有效，我之前做过ng-style={width:$scope.value+'%'}，但它没有用。您为样式设置绑定变量的解决方案正在发挥作用。你的小提琴有一个小问题，因为进度条宽度不会根据输入而改变，我更正了here in this fiddle
再次更新了 jsfiddle，只改变了样式的宽度（所以你可以根据需要将其他样式应用于同一个 var）。 :) jsfiddle.net/bPf8n $scope.myStyle.width = $scope.value + '%';

【解决方案2】：

要为 IE 添加，您可能需要使用 ng-attr-style 来使其正确更新进度条宽度。

问题是某些浏览器（例如 IE）在尝试绑定属性时表现不佳，而使用它可以让您绕过。

这就是我最终的样子：ng-attr-style="width:{{vm.uploadProgressPercent}}%"

希望这对某人有所帮助！

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

【讨论】：