AngularJS ng-style with a conditional expression

Question

I am handling my issue like this   ng-style    width  getTheValue        But to avoid having this function on the controller side  I would much prefer to do something like this   ng-style    width  myObject value     ok     100      0        How can I do this

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 am doing like below for multiple and independent conditions and it works like charm    lt div ng-style    valueFromJS        Hello      color    red       color        amp  amp  valueFromNG-Repeat        dayOfToday        font-weight    bold       font-weight    normal    gt  lt  div gt

User · Answer

also this syntax for ternary operator will work     ng-style   lt  scope var gt  lt condition gt                lt css-prop-1 gt      lt value gt       lt value2 gt   100                 lt css-prop-2 gt     lt string gt                         lt css-prop-1 gt     lt string gt              lt css-prop-2 gt     lt string gt              where  lt value gt  are  scope property values  In example   ng-style  column histograms value  gt 0             width    column histograms value     column histograms limit  100            background    F03040               width   1px        background    2E92FA              this allows for some calculaton into the css property values

User · Answer

I am using ng-class for adding style  -   ng-class  column label   Description      tableStyle                                   column label     Markdown Type     Mtype                column label     Coupon Number     couponNur                       Using ternary operator along with ng-class directives in angular js for giving style  Then define the style for class in  css or  scss file  Eg  -   Mtype         width  90px  important         min-width  90px  important         max-width  90px  important           tableStyle           width  129px  important           min-width  129px  important           max-width  129px  important     couponNur           width  250px  important           min-width  250px  important           max-width  250px  important

User · Answer

As  Yoshi said  from angular 1 1 5 you can use-it without any change   If you use angular  lt  1 1 5  you can use ng-class    largeWidth       width  100       smallWidth       width  0                ng-class   largeWidth  myVar     ok   smallWidth  myVar     ok

User · Answer

EDIT  Ok i was previously not aware that AngularJS usually refers to Angular v1 version and only Angular to Angular v2  This answer only applies for Angular Leaving this here for future reference    Not sure how it works for you guys but on Angular 9 i have to wrap ngStyle in brackets like this   ng-style   quot    width     myObject value     ok      100      0     quot   Otherwise it doesn t work

User · Answer

You can achieve it like that   ng-style     width     myObject value     ok      100      0

User · Answer

if you want use with expression  the rigth way is     lt span class  ng-style  yourCondition  amp  amp   color  red     gt Sample Text lt  span gt    but the best way is using ng-class

User · Answer

simple example    lt div ng-style  isTrue  amp  amp    background-color   green        background-color    blue    style  width 200px height 100px border 1px solid gray   gt  lt  div gt      background-color   green   RETURN true  OR the same result     lt div ng-style  isTrue  amp  amp    background-color   green    style  width 200px height 100px border 1px solid gray background-color  blue  gt  lt  div gt    other conditional possibility    lt div ng-style  count     0  amp  amp    background-color   green       count     1  amp  amp    background-color   yellow    style  width 200px height 100px border 1px solid gray background-color  blue  gt  lt  div gt

User · Answer

For single css property  ng-style  1  1  amp  amp    color   red      For multiple css properties below can be referred  ng-style  1  1  amp  amp    color   red   font-style    italic      Replace 1  1 with your condition expression

User · Answer

jfredsilva obviously has the simplest answer for the question      ng-style     width     myObject value     ok      100      0        However  you might really want to consider my answer for something more complex   Ternary-like example    lt p ng-style   width   true  100   false  0    myObject value     ok     gt  lt  p gt    Something more complex     lt p ng-style       color         blueish   blue   greenish   green    color        font-size     0   12px   1   18px   2   26px    zoom      gt Test lt  p gt    If  scope color     blueish   the color will be  blue    If  scope zoom    2  the font-size will be 26px    x000D   x000D  angular module  app       x000D  function MyCtrl  scope    x000D     scope color    blueish   x000D     scope zoom   2  x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 0 1 angular min js  gt  lt  script gt  x000D   lt div ng-app  app  ng-controller  MyCtrl  ng-style    x000D     color         blueish   blue   greenish   green    color     x000D     font-size     0   12px   1   18px   2   26px    zoom   x000D     gt  x000D    color     color   lt br gt  x000D    zoom     zoom   x000D   lt  div gt  x000D   x000D   x000D

[angularjs] AngularJS ng-style with a conditional expression

Examples related to angularjs

Examples related to angularjs-directive