AngularJS - conditional ngStyle

Question

Is there a possibility to do something like this:

<span data-ng-style="vm.myFlag == true ? 'background-color:{{myObject.color}};padding:2px;border-radius:2px;' : ''">

This if - else does not work. ngClass does not work because the color is a property of my object(s).

Don't know if the {{myObject.color}} will work though; need to test. — Ramsing Nadeem, Aug 22 '17 at 05:37

score 2 · Answer 1 · edited Oct 03 '21 at 15:09

2

https://docs.angularjs.org/api/ng/directive/ngStyle

Basic Example of ng-style :

<span ng-style="{'background-color':'blue'}">Sample Text</span>

Using ternary operator to make styling conditional on vm.myFlag:

<span data-ng-style="(vm.myFlag == true) ? {'background-color':
 myObject.color, 'padding': '2px', 'border-radius': '2px'}
 : {}">

edited Oct 03 '21 at 15:09

FeRD

1,699
15
24

answered Aug 22 '17 at 05:39

Aks1357

1,062
1
9
19

Would you like to improve your code-only answer by augmenting it with some explanation? – Yunnosch Aug 22 '17 at 06:20

score 0 · Answer 2 · answered Aug 22 '17 at 05:37

0

<span data-ng-style="vm.myFlag && {'background-color':myObject.color}">

answered Aug 22 '17 at 05:37

score 0 · Answer 3 · answered Aug 22 '17 at 05:41

You could do this:

<span data-ng-style="vm.geMyStyle()">

and in your controller:

vm.getMyStyle= func(){

    let style = vm.myFlag == true ? 'background-color:' 
    +myObject.color+';padding:2px;border-radius:2px;' : '';

    return style;
}

but you also should check if there is the color-property set.

AngularJS - conditional ngStyle

3 Answers3

Linked