CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Sharath Bhaskara
Sharath Bhaskara

Reputation: 497

bootstrap progress bar style for width is not working with angular js bound variable

Progress Bar width is not getting updated by the variable bound by angular scope in IE.

I want to have a progress bar length to be updated by a variable in angular scope, for that i have tried using the angular expression directly in the in-line style element and also tried with ng-style attribute.

Its working properly in Firefox and Chrome, while on IE its failing to set the width of the progress bar.

Inspect element of the "div" element in IE shows as below

Inline Style { width : {{value}}% }

My understanding here, is the expression is not getting evaluated in the style attribute in Internet Explorer.

You can find the complete test script in this fiddle

Just wondering have anyone faced the same issue, anytime when working with the combination of bootstrap with angular.

Upvotes: 2

Views: 2575

Answers (2)

Jeff L
Jeff L

Reputation: 141

To add on for IE, you may need to use ng-attr-style to get it to properly update the progress bar width.

The problem is that some browsers like IE do not play nice when trying to bind attributes and using this lets you get around.

This is what mine ended up looking like: ng-attr-style="width:{{vm.uploadProgressPercent}}%"

Hope this helps somebody!

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

Upvotes: 2

JakeSidSmith
JakeSidSmith

Reputation: 933

You should use ng-style

http://jsfiddle.net/un8B5/

html:

ng-style="myStyle"

js:

$scope.myStyle = {width: $scope.value + '%'};

Upvotes: 3

Related Questions