3

I need to add multiple condition in the ng-style. How can I do this?

I tried below code but it is not working. 

ng-style="ifTrue?'opacity:1;' : 'ifTrue? 'opacity: 1;': 'opacity: 0.5;''"
acostela
  • 2,597
  • 3
  • 33
  • 50
User7723337
  • 11,857
  • 27
  • 101
  • 182
  • Related : http://stackoverflow.com/questions/19375695/angular-ng-style-with-a-conditional-expression – 0aslam0 Nov 18 '16 at 09:10

6 Answers6

4

You can simply separate your conditions with ",". Something like this:

ng-style="{ 'background-color': '#ff0', color: 'red' }"

See this example: http://jsbin.com/fabisepede/edit?html,output

Always remember to put quotes on "dashed" word ('background-color').

For the value you can also use variables defined in your controller and assign the style conditionally, but for that i prefer ng-class.

eliagentili
  • 619
  • 5
  • 9
4

You could use something like

ng-style="condition && { /*properties*/ } || condition2 && { /*other properties*/ }"

taguenizy
  • 2,140
  • 1
  • 8
  • 26
4

This worked for me

ng-style="IfCondition1 ? checkAnotherCondition && {'color':'red'} : {'color': 'green','font-weight':'bolder'}"

It checks my first condition and if true then it checks another condition and if that is true it makes it red. If the first condition is false then the last style is applied.

DaFrenzy
  • 121
  • 6
2

ng-style="ifTrue ? 'opacity:1;' : 'opacity: 0.5;'

ng-style=(condition) ? 'run this if true' : 'run this if false'

Why dont use something like this?

hdotluna
  • 5,514
  • 4
  • 20
  • 31
0

how to set for three condition example:

if data is === 1 then red

if data is === 2 then blue

else pink

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
lodey
  • 174
  • 2
  • 8
0

@mario - you can use something like

[ngStyle]="{'property-to-set': (if_1) ? (true_block_1) : ((if_2) ? (true_block_2) : (other_true))}
Vlad Miftodi
  • 1