This should be a simple problem, but I can't seem to find a solution.
I have the following markup:
<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>
I need the background color to be bound to the scope, so I tried this:
<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>
That didn't work, so I did some research and found ng-style, but that didn't work, so I tried taking the dynamic part out and just hard-coding the style in ng-style, like this...
<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>
and that doesn't even work. Am I misunderstanding how ng-style works? Is there a way of putting {{data.backgroundCol}} into a plain style attribute and getting it to insert the value?
This question is related to
javascript
angularjs
ng-style
ngStyle directive allows you to set CSS style on an HTML element dynamically.
Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys. Since some CSS style names are not valid keys for an object, they must be quoted.
ng-style="{color: myColor}"
Your code will be:
<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>
If you want to use scope variables:
<div ng-style="{'background-color': data.backgroundCol}"></div>
Here an example on fiddle that use ngStyle, and below the code with the running snippet:
angular.module('myApp', [])_x000D_
.controller('MyCtrl', function($scope) {_x000D_
$scope.items = [{_x000D_
name: 'Misko',_x000D_
title: 'Angular creator'_x000D_
}, {_x000D_
name: 'Igor',_x000D_
title: 'Meetup master'_x000D_
}, {_x000D_
name: 'Vojta',_x000D_
title: 'All-around superhero'_x000D_
}_x000D_
_x000D_
];_x000D_
});.pending-delete {_x000D_
background-color: pink_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
<div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}">_x000D_
_x000D_
<input type="text" ng-model="myColor" placeholder="enter a color name">_x000D_
_x000D_
<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">_x000D_
name: {{item.name}}, {{item.title}}_x000D_
<input type="checkbox" ng-model="item.checked" />_x000D_
<span ng-show="item.checked"/><span>(will be deleted)</span>_x000D_
</div>_x000D_
<p>_x000D_
<div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>_x000D_
</div>On a generic note, you can use a combination of ng-if and ng-style incorporate conditional changes with change in background image.
<span ng-if="selectedItem==item.id"
ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
'background-size':'52px 57px',
'padding-top':'70px',
'background-repeat':'no-repeat',
'background-position': 'center'}">
</span>
<span ng-if="selectedItem!=item.id"
ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
'background-size':'52px 57px',
'padding-top':'70px',
'background-repeat':'no-repeat',
'background-position': 'center'}">
</span>
Simply do this:
<div ng-style="{'background-color': '{{myColorVariable}}', height: '2rem'}"></div>I would say that you should put styles that won't change into a regular style attribute, and conditional/scope styles into an ng-style attribute. Also, string keys are not necessary. For hyphen-delimited CSS keys, use camelcase.
<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>
The easiest way is to call a function for the style, and have the function return the correct style.
<div style="{{functionThatReturnsStyle()}}"></div>
And in your controller:
$scope.functionThatReturnsStyle = function() {
var style1 = "width: 300px";
var style2 = "width: 200px";
if(condition1)
return style1;
if(condition2)
return style2;
}
Directly from ngStyle docs:
Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.
<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>
So you could do this:
<div ng-style="{'background-color': data.backgroundCol}"></div>
Hope this helps!
Source: Stackoverflow.com