AngularJS

Question

我正在开发一个 Web 应用程序，我试图在 Internet Explorer 中显示一个具有动态宽度（基于进度条标签）的进度条。我正在使用 Windows 8 和 Windows 8.1 IE 版本。在 IE 中加载视图时，宽度显示为 style="" 而不是 style="width:{{progressBar.percent}}%".

我能够在 Internet Explorer 中呈现进度条的动态颜色和标签。但是，我无法动态呈现进度条的宽度。如果我手动输入宽度，它工作正常，但宽度每天都会变化，所以手动输入宽度不是解决方案。

请注意：我已经在许多其他浏览器上测试了进度条，包括 Chrome、Firefox、Safari 和 Opera，它们都能正确呈现数据。

这是我的代码：

 <div ng-model="widget.progressBar" ng-repeat="progressBar in widget.progress" class="progress-bar-{{progressBar.color}}"style="width:{{progressBar.percent}}%">
  <div class="progress-bars">{{progressBar.label}}</div>
  <div class="progress-bars-text">{{progressBar.number}}</div>
  <div class="dash-progress-num">{{progressBar.number}}</div>
 </div>

不起作用的部分是style="width:{{progressBar.percent}}%"。我也尝试过 ng-style 并最终显示 style="width:25%" 但是它实际上并没有改变大小进度条并且它破坏了其他网络浏览器。

如有任何帮助，我们将不胜感激！

Answer 1

我做了更多的研究，最终对我有用的是 ng-attr-style="width:{{progressBar.percent + '%' }}"。

我开始在这个网站上学习 attr...https://docs.angularjs.org/guide/directive

AngularJS - 所有最新版本的 IE 都忽略动态宽度数据

AngularJS - All latest versions of IE are ignoring dynamic width data

width