bind property in dom's style attribute angular js

Question

I have problem with IE only when I try to render a property into style attribute.

Html:

<span style="background-color: {{ color }}">{{ color }}</span>

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.color = '#00ffff'
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <span style="background:{{color}}">Hello, {{name}}!</span>
  </div>
</div>

fiddle

If your solution will be using ngStyle I will be glad to example of code that use the variable $scope.color. That's mean that when the $scope.color will be change I want that the background will change too.

I was checked at 11 version, but I think that is not depends on version. — Mosh Feu
– Mosh Feu, Commented Nov 6, 2014 at 9:35

Rahil Wazir · Accepted Answer · 2014-11-06 09:39:24Z

2

You can use ngStyle directive:

<span ng-style="{'background-color': color}">Hello, {{name}}!</span>

Where color is your $scope.color

answered Nov 6, 2014 at 9:39

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

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

Comments

Kypros · Accepted Answer · 2014-11-06 10:13:48Z

2

Try to use

ng-style="{'background': (color)}"

http://jsfiddle.net/rg6r35sq/3/

edited Nov 6, 2014 at 10:13

Kypros

2,9865 gold badges23 silver badges28 bronze badges

answered Nov 6, 2014 at 9:39

Stanislav Kvitash

4,63221 silver badges29 bronze badges

Collectives™ on Stack Overflow

bind property in dom's style attribute angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related