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?

Solution 1

As @Yoshi said, from angular 1.1.5 you can use-it without any change.

If you use angular < 1.1.5, you can use ng-class.

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

ng-class="{largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'}"

Solution 2

simple example:

<div ng-style="isTrue && {'background-color':'green'} || {'background-color': 'blue'}" style="width:200px;height:100px;border:1px solid gray;"></div>

{'background-color':'green'} RETURN true

OR the same result:

<div ng-style="isTrue && {'background-color':'green'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

other conditional possibility:

<div ng-style="count === 0 && {'background-color':'green'}  || count === 1 && {'background-color':'yellow'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

Solution 3

You can achieve it like that:

ng-style="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"

Solution 4

@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:

<p ng-style="{width: {true:'100%',false:'0%'}[myObject.value == 'ok']}"></p>

Something more complex:

<p ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">Test</p>

If $scope.color == 'blueish', the color will be 'blue'.

If $scope.zoom == 2, the font-size will be 26px.

angular.module('app',[]);
function MyCtrl($scope) {
  $scope.color = 'blueish';
  $scope.zoom = 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl" ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">
  color = {{color}}<br>
  zoom = {{zoom}}
</div>

Solution 5

if you want use with expression, the rigth way is :

<span class="ng-style: yourCondition && {color:'red'};">Sample Text</span>

but the best way is using ng-class

View more solutions

Comments

[Yoshi]

what version of angular are you using? At least with 1.1.5 this is possible without any changes. demo

[TigrouMeow]

I am using 1.0.8 :) Oh too bad, I should really try to upgrade then... thanks!

[BornToCode]

Although that with 1.1.5 your code is working, if you use other style properties instead of width (e.g. font-size) your code won't work until you change it to: ng-style="{ 'font-size': myObject.value == 'ok' ? '20px' : '10px' }" (must surround the style property with quotes).

[Usman Iqbal]

I dont know this is helpful but for new comers you can use ng style with an object but like this ng-style="objectBit ? { 'border':'1px solid red'} : { 'border': 'none' }"

[TigrouMeow]

Okay, thanks! I just wondered if there was a way to do it without using any classes, but everything directly using Angular on the template.

[MGot90]

ng-style is much faster than ng-class. If you have a large DOM with lots of conditionals it will be noticeable. Nevertheless this is clean.

[Thanigainathan]

How to use this for more than one class names ?

[0x777]

And if I'm using angular >1.1.5 ?

[Lee]

This doesn't exactly answer the question.

[Adam Plocher]

How might I accomplish this but with multiple independent styles/conditions? Thanks, great answer btw.

[Serj Sagan]

This caused Uncaught Error: Template parse errors: Can't bind to 'ng-style' since it isn't a known property of 'div' error for me

[netalex]

interesting syntax {<value>:'<string>'}[<$scope.var>]}, where it come from?

[Rajnish Rajput]

@Arthur your example is going to check isTrue and {'background-color':'green'} OR it is going to check only isTrue and will put background how it will work please explain anyone?

[Arthur Tsidkilov]

@rajnish-rajput it is going to check isTrue and put background, {'background-color':'green'} by default return true as a style object

[JWiley]

This question literally asks for an example with ng-style and the accepted answer with 100+ votes does not provide that.

[Bernardo Dal Corno]

Syntax Error: Token '%3A' is%20an%20unexpected%20token at column 9 of the expression [ng-style%3A%...

[Jouke]

this is the wrong answer, the answer from @Arthur below is correct.

[Jeppe]

This should be the accepted answer. It actually uses ng-style and allows for conditionals for each style.

[Tuukka Haapaniemi]

This does indeed work, but the syntax is really weird. Any links to documentation of this or any input on why it works with &&- and ||-operators?

[hmd]

@ArthurTsidkilov what if I want to restrict ng-style to run only once? I can't use ng-class and controller scope variable, I need to calculate all containers heights at runtime but once a property is set I want to restrict it to avoid continues execution.

[Kit]

It's just using bracket notation to access the object. color['blueish'] == 'blue'