AngularJS ng-style with a conditional expression

angularjs angularjs-directive
TigrouMeow picture TigrouMeow · Oct 15, 2013 · Viewed 496.6k times · Source

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?

Answer

Arthur Tsidkilov picture Arthur Tsidkilov · Apr 6, 2015

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>

Related questions

How to set focus on input field?

What is the 'Angular way' to set focus on input field in AngularJS? More specific requirements: When a Modal is opened, set focus on a predefined <input> inside this Modal. Everytime <input> becomes visible (e.g. …

Read More
What is the difference between '@' and '=' in directive scope in AngularJS?

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle. And here are some relevant snippets: From the HTML: <pane bi-title="title" title="{{title}}">{{text}}</pane> From …

Read More
How to use a keypress event in AngularJS?

I want to catch the enter key press event on the textbox below. To make it more clear I am using a ng-repeat to populate the tbody. Here is the HTML: <td><input type="number" id="closeqty{{$…

Read More