Question

我试图显示一个百分比值的进度条。无角度版本适用于Chrome和IE。但角度版仅适用于Chrome。在IE中它是空白的。您可以使用IE浏览器进行测试。我还尝试将value设置为"50%"并将html更改为style="{{value}}"。但仍然没有奏效。我有什么遗漏的吗？

＆＃13;

angular.module('myApp', [])
.controller('View2Ctrl', ['$scope', function($scope) {
  $scope.value=50;
}]);

＆＃13;

<link href="//getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  
  <p>Angular version</p>
<div class="progress" ng-controller="View2Ctrl">
  <div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="{{value}}"
       aria-valuemin="0" aria-valuemax="100" style="width:{{value}}%;">
  </div>
</div>
  
  <p>No angular version</p>
  <div class="progress">
  <div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="{{value}}"
       aria-valuemin="0" aria-valuemax="100" style="width:50%;">
  </div>
</div>
</body>

＆＃13;

Answer 1

使用ng-style指令动态更改样式并使用适当的范围绑定。

将style="width:{{value}}%;"更改为ng-style="{width: value + '%'}"

Working Plukr

也在IE10上测试过。

希望这可以帮到你。感谢。

在MSIE 10中无法正确呈现AngularJS模板

1 个答案: