CODEWITHSUNDEEP
htmlangularjs
user3802434
user3802434

Reputation: 876

Simple AngularJS Script Works in Chrome but fails in IE11

I have a simple AngularJS (v1.3.0-rc.1) page (see below) from the book, Learning AngularJS for .NET Developers (Packt Publishing) page 13, that works in Chrome, but fails to pickup the <span title="{{color}}" style="background-color:{{color}};">&nbsp;&nbsp;</span> correctly in IE11. The F12 option in IE shows the style is not being picked up, <span title="magenta">&nbsp;&nbsp;</span>. What can the problem be in IE11?

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <title>Chapter 1 Example - AngularJS</title>
        <script src="Scripts/angular.js"></script>
    </head>
    <body>
        <h1>Introduction</h1>
        <label>My name:</label>
        <input type="text" placeholder="Please enter name" ng-model="name" />
        <br />
        <label>My favorite color:</label>
        <select ng-model="color">
            <option>Please select</option>
            <option>red</option>
            <option>yellow</option>
            <option>magenta</option>
        </select>
        <h3 ng-show="name">Hello! My name is {{name}}.</h3>
        <h3 ng-show="color">My favorite color is <span title="{{color}}" style="background-color:{{color}};">&nbsp;&nbsp;</span></h3>
    </body>
</html>

Upvotes: 2

Views: 1217

Answers (2)

Jason
Jason

Reputation: 8650

I had to use ng-attr-style.

<div ng-attr-style="width: {{value}}%"></div>

Here is a github discussion about this issue.

Here is a stackoverflow question which has more solutions.

Upvotes: 2

Jim Schubert
Jim Schubert

Reputation: 20357

This is probably failing because the browser is attempting to apply styles before AngularJS has gotten ahold of the string and replaced {{color}} with whatever value is being set.

Angular offers some angular-specific attributes to handle this discrepancy (ng-style, ng-href, etc).

Try replacing that span with:

<span title="{{color}}" ng-style="{'background-color':color}">&nbsp;&nbsp;</span>

Upvotes: 2

Related Questions