Conditional ng-style

Question

I am trying to change the border upon condition. I don't have any errors but it doesn't work.

<span   ng-style="{{thumb.Selected}} ? {'border' : 'red'}:{'border' : 'black'}" style="display:block; border:solid 1px black;"  >

does this answer your question? https://stackoverflow.com/questions/45809564/angularjs-conditional-ngstyle — Risalat Zaman, Feb 17 '21 at 14:51

score 1 · Accepted Answer · answered Feb 17 '21 at 16:28

You don't need to put the condition in the curly braces. And as for ng-style here, the way I understand it is you are replacing the border property of the styles that are being applied to this element.

Also if you are trying to change the border I don't think border: red or border:black are valid css statements. One way to solve this problem is writing it like this

<span ng-style="thumb.selected ? {'border-color': 'red'} : {}" 
style="border:1px solid black">Your text here </span>

You might wanna look into ng-style and css border property

Conditional ng-style

1 Answers1