How to get multi css rule for ng-style by function?

Question

I need for apply multi css rule to html tag in angular form template.

<div class="form-control" id="data.objectStyle"  
  ng-model="data.type" 
  ng-style="getStyle(data.objectStyle)">
{{data.objectStyle.title}}
</div>

getStyle function in controller :

$scope.getStyle = function (taskType) {
    return {
         background-color:taskType.backColor,
         color: taskType.color,
         font-size:taskType.fontSize,
         font-family:taskType.font
    }
)};

taskType object:

{
    backColor:'#006',
    color:'#56DA',
    fontSize:12,
    font:'New Times Roman'
}

The getStyle function does not return a style! What to do?

Churchyard

You haven't included enough code. What does the function return? What are the values of taskType.backColor etc? – Ordonnance

@Ed Hinchliffe taskType = {backColor:'#006',color:'#56DA',fontSize:12,font:'New Times Roman'}. – Churchyard

That should work then. Errors in the console? – Ordonnance

Answer 1

EDIT

The docs specify that you need to wrap your keys in quotation marks so they aren't invalid JSON object keys:

return {
     "background-color": taskType.backColor,
     "color": taskType.color,
     "font-size":taskType.fontSize,
     "font-family":taskType.font
}

---

Old Answer (not using ng-style)

While I never used ng-style, it doesn't seem to take objects. Rather it is an equivalent of ng-class but for single styles.

Try changing your function to:

$scope.getStyle = function (taskType) {

        return {
         "background-color:"+taskType.backColor+
         ";color:"+ taskType.color+
         ";font-size:"+taskType.fontSize+
         ";font-family:"+taskType.font+";";
    }
)};

and the html to use the regular style tag with a bind:

<div class="form-control" id="data.objectStyle"  
ng-model="data.type" style="{{getStyle(data.objectStyle)}}">

Rooney

@crmpicco, check the docs or ask a question, otherwise I can't help – Rooney

I think this should work: ng-style="getStyle(data.objectStyle)" – Helbona

@crmpicco, it should work given the keys are wrapped in quotes – Rooney

What version of AngularJS are you using? I'm using 1.0.7. – Helbona

Actually you don't need to wrap properties in quotes - that's syntactically identical anyway. Nor do you need the semi-colons (in fact I'm surprised they'd work). It does now take objects. You can also camelCase eg; return { backgroundColor: 'red', color: 'blue'}; – Confection

@cirrus, the docs still tell us to wrap keys in quotes. I do believe camelCase works as that is teh format in which the styles are stored on the DOM object, but I'm unsure if it will work for browser prefixes. Angular Doc for ngStyle . And the semi colons were an old answer, not using the ng-style directive – Rooney

i use AngularJS v1.2.6 – Churchyard