I am using Angular and bootstrap to show a progress bar. here is the html
<div class="progress progress-striped active ">
<div class="bar bar-info" style="width:{{score}}%"></div>
</div>
score is coming from my controller. This code works in all the browser except IE.
Any help will be appreciated.
Just change to the following:
<div class="progress progress-striped active ">
<div class="bar bar-info" ng-attr-style="width:{{score}}%;"></div>
</div>
When you want to use Angular interpolation in an HTML attribute like style you need to use the ng-attr- prefix for that attribute for it to place nice in the browser.
If your "score" is getting the value properly then apply the style little differently, The code below worked for me:
Change your style attribute to ng-style="width={width:'{{ score}}%'}"
<div class="progress progress-striped active ">
<div class="bar bar-info" ng-style="width={width:'{{ score}}%'}"></div>
</div>
Found the workaround from theDemi post. You have to write your own directive as follows:
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>');
});
}
});
usage:
<div class="progress" my-progress="nameOfYourProgressModelVariable"></div>
nameOfYourProgressModelVariable is only the name of the variable, not the value - so leave off the curly braces. It works exactly as shown.