5

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.

4
  • What is it doing in Internet Explorer? Which version of Internet Explorer? Is there any relevant output in the console (Press F12)? Commented Jun 23, 2013 at 1:46
  • Worth nothing that Angular ships with expectations of IE-related issues. Commented Jun 23, 2013 at 5:00
  • IE version 10.Nothing happens in IE, no message on console, It shows the progress bar without the progress. Looks like it simply does not parse {{score}}. However, I have similar line like ng-hide= {{loginVisible}} is working. even style="visibility:{{showSearch}}" is working on the same page. Commented Jun 23, 2013 at 13:33
  • possible duplicate of Angular UI Bootstrap progress bar in IE10 Commented Sep 26, 2014 at 18:18

3 Answers 3

13

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.

Sign up to request clarification or add additional context in comments.

1 Comment

ng-attr-style="width:{{score}}%;" instead of style="width:{{score}}%"
7

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>

1 Comment

This worked for me as well. I love Internet Explorer so much </sarcasm>
5

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>

1 Comment

This works great so far. Please note that in the attribute value, nameOfYourProgressModelVariable is only the name of the variable, not the value - so leave off the curly braces. It works exactly as shown.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.