how to apply string style to an element in angular.js?

Question

I have a dynamic style model as a string, which I want to apply to a html element. Unfortunately ng-style works with objects.

How can I make this work with a simple string?

item.trStyle is something like "background-color:#B5EFF2;padding:10px;text-align:center;"

<td style="{{item.trStyle}}">

</td>

Use ng-style, not style docs.angularjs.org/api/ng/directive/ngStyle — Ronnie
– Ronnie, Commented Aug 25, 2014 at 15:41
Right..so put your css into an object {'background-color': '#B5EFF2','padding':'10px','text-align':'center'} — Ronnie
– Ronnie, Commented Aug 25, 2014 at 15:47
so does this style change depending on a circumstance or is this just a static style? — Ronnie
– Ronnie, Commented Aug 25, 2014 at 16:14

Onosa · Accepted Answer · 2014-08-25 15:49:28Z

1

You may need to use ng-class with several different classes that builds the style you want. For example..

<td ng-class="{blueBG: shouldBeBlue, tenPadding: shouldBePadding, centerText: shouldCenterText}">

css...

.blueBG{background-color:#B5EFF2;}
.tenPadding{padding:10px;}
.centerText{text-align:center;}

angular model

{
$scope.shouldBeBlue = true;
$scope.shouldBePadding = true;
$scope.shouldCenterText = true;
}

answered Aug 25, 2014 at 15:49

Onosa

1,2731 gold badge12 silver badges28 bronze badges

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

1 Comment

impossible to do that. what if there are 100 x css styles and values?