14

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?

isherwood
  • 58,414
  • 16
  • 114
  • 157
sajjad
  • 646
  • 1
  • 9
  • 20
  • You haven't included enough code. What does the function return? What are the values of `taskType.backColor` etc? – Ed_ Mar 11 '14 at 12:33
  • @Ed Hinchliffe taskType = {backColor:'#006',color:'#56DA',fontSize:12,font:'New Times Roman'}. – sajjad Mar 11 '14 at 14:25
  • That should work then. Errors in the console? – Ed_ Mar 11 '14 at 14:36

1 Answers1

15

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)}}">
Community
  • 1
  • 1
caffeinated.tech
  • 6,428
  • 1
  • 21
  • 40
  • @crmpicco, check the [docs](https://docs.angularjs.org/api/ng/directive/ngStyle) or ask a question, otherwise I can't help – caffeinated.tech Oct 02 '14 at 16:52
  • I think this should work: `ng-style="getStyle(data.objectStyle)"` – crmpicco Oct 02 '14 at 16:54
  • @crmpicco, it should work given the keys are wrapped in quotes – caffeinated.tech Oct 02 '14 at 16:58
  • What version of AngularJS are you using? I'm using 1.0.7. – crmpicco Oct 02 '14 at 16:59
  • 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'}; – cirrus Nov 27 '14 at 17:47
  • @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](https://docs.angularjs.org/api/ng/directive/ngStyle) . And the semi colons were an old answer, not using the ng-style directive – caffeinated.tech Nov 27 '14 at 18:15
  • i use AngularJS v1.2.6 – sajjad Dec 06 '14 at 12:45