Apply CSS style attribute dynamically in Angular JS

Question

This should be a simple problem  but I can t seem to find a solution   I have the following markup    lt div style  width 20px  height 20px  margin-top 10px  border solid 1px black  background-color  ff0000   gt  lt  div gt    I need the background color to be bound to the scope  so I tried this    lt div style   width 20px  height 20px  margin-top 10px  border solid 1px black  background-color   data backgroundCol      gt  lt  div gt    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      lt div ng-style   width 20px  height 20px  margin-top 10px  border solid 1px black  background-color  ff0000    gt  lt  div gt    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

User · Answer

On a generic note  you can use a combination of ng-if and ng-style incorporate conditional changes with change in background image    lt 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    gt    lt  span gt    lt 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    gt    lt  span gt

User · Answer

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     lt div ng-style   backgroundColor  data backgroundCol   style  width 20px  height 20px  margin-top 10px  border solid 1px black   gt  lt  div gt

User · Answer

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    lt div ng-style    width   20px    height   20px    margin-top   10px    border   solid 1px black    background-color    ff0000    gt  lt  div gt    If you want to use scope variables    lt div ng-style    background-color   data backgroundCol   gt  lt  div gt    Here an example on fiddle that use ngStyle  and below the code with the running snippet    x000D   x000D  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      x000D   pending-delete   x000D    background-color  pink x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app  myApp  ng-controller  MyCtrl  ng-style   color  myColor   gt  x000D   x000D     lt input type  text  ng-model  myColor  placeholder  enter a color name  gt  x000D   x000D     lt div ng-repeat  item in items  ng-class    pending-delete   item checked   gt  x000D      name    item name      item title   x000D       lt input type  checkbox  ng-model  item checked    gt  x000D       lt span ng-show  item checked   gt  lt span gt  will be deleted  lt  span gt  x000D     lt  div gt  x000D     lt p gt  x000D       lt div ng-hide  myColor    red   gt I will hide if the color is set to  red   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Simply do this    x000D   x000D   lt div ng-style    background-color      myColorVariable     height   2rem    gt  lt  div gt  x000D   x000D   x000D

User · Answer

The easiest way is to call a function for the style  and have the function return the correct style    lt div style    functionThatReturnsStyle      gt  lt  div gt    And in your controller    scope functionThatReturnsStyle   function       var style1    width  300px     var style2    width  200px     if condition1       return style1    if condition2       return style2

User · Answer

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     lt div ng-style    width    20px    height    20px         gt  lt  div gt    So you could do this    lt div ng-style    background-color   data backgroundCol   gt  lt  div gt    Hope this helps

[javascript] Apply CSS style attribute dynamically in Angular JS

Examples related to javascript

Examples related to angularjs

Examples related to ng-style