Conditionally change CSS with AngularJS

Question

I'm trying to change the background-color of a div based on the value of an Angular expression. I have the following div:

<div class="outer">
  <h4 class="weather-heading">It's currently {{weather}}</h4>
</div>

Based on the value of {{weather}} (i.e. sunny, cloudy), I want to change the background-color of the outer div. What's the best way to do this with angular?

Have you taken a look at ngClass?

incutonez
– incutonez

2013-09-15 16:47:43 +00:00
Commented Sep 15, 2013 at 16:47 — incutonez
– incutonez, Commented Sep 15, 2013 at 16:47
the best way is to put the view' logic in directive

Ivan Chernykh
– Ivan Chernykh

2013-09-15 16:48:35 +00:00
Commented Sep 15, 2013 at 16:48 — Ivan Chernykh
– Ivan Chernykh, Commented Sep 15, 2013 at 16:48
@Cherniv can you give a code example?

Sara
– Sara

2013-09-15 16:52:09 +00:00
Commented Sep 15, 2013 at 16:52 — Sara
– Sara, Commented Sep 15, 2013 at 16:52
you can start from ngClass as incutonez suggested

Ivan Chernykh
– Ivan Chernykh

2013-09-15 16:55:35 +00:00
Commented Sep 15, 2013 at 16:55 — Ivan Chernykh
– Ivan Chernykh, Commented Sep 15, 2013 at 16:55

Michael Benford · Accepted Answer · 2013-09-15 17:00:28Z

3

As @incutonez said, you could use ng-class:

<div ng-class="{'sunny': weather == 'Sunny', 'rainy': weather == 'Rainy'}">
  <h4 class="weather-heading">It's currently {{weather}}</h4>
</div>

Plunker here.

Depending on what you're trying to accomplish, it may be more appropriate to create a directive, as @Cherniv has suggested.

answered Sep 15, 2013 at 17:00

Michael Benford

14.1k3 gold badges62 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditionally change CSS with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related