Search code examples
javascripthtmlcssangularjsng-style

Apply css style depending on scope variable

I'm trying to set a css property depending on a scope variable.

Basically, something like this :

 <div ng-style="background: filters.area ? #f39c12 : #424242">

Or maybe it should be more like :

<div ng-style="filters.area ? 'background:#f39c12' : 'background:#424242'">

or even :

<div ng-style="{{filters.area ? 'background:#424242' : 'background:#ff0000'}}">

But none of the above worked

Solution

  • background value would be set by ternary operator & Also use { & } instead of {{}} interpolation.

    Basically ng-style directive asks for JSON & internally it use element.css(JSON)

    <div ng-style="{'background' : filters.area ? '#424242' : '#ff0000'}">