Question

我正在使用Angular和bootstrap来显示进度条。这是html

<div class="progress progress-striped  active ">
    <div class="bar bar-info" style="width:{{score}}%"></div>
</div>

score来自我的控制器。此代码适用于除IE之外的所有浏览器。

任何帮助将不胜感激。

Answer 1

只需更改为以下内容：

<div class="progress progress-striped  active ">
    <div class="bar bar-info" ng-attr-style="width:{{score}}%;"></div>
</div>

如果要在样式等HTML属性中使用角度插值，则需要使用该属性的ng-attr-前缀，以便在浏览器中放置好。

Answer 2

如果你的“得分”正确得到了价值，那么应用的风格就不一样了，下面的代码对我有用：

将您的样式属性更改为ng-style =“width = {width：'{{score}}％'}”

<div class="progress progress-striped  active ">
    <div class="bar bar-info" ng-style="width={width:'{{ score}}%'}"></div>
</div>

Answer 3

从theDemi post找到解决方法。您必须按如下方式编写自己的指令：

angular.module('myApp').directive('myProgress', function() {
  return function(scope, element, attrs) {
  scope.$watch(attrs.myProgress, function(val) {
       element.html('<div class="bar" style="width: ' + val + '%"></div>');
  });
 }
});

用法：

 <div class="progress" my-progress="nameOfYourProgressModelVariable"></div>

进度条在IE以外的所有浏览器中工作（Angular + bootstrap）

3 个答案: