css - AngularJS で CSS を条件付きで変更する

Question

Angular 式の値に基づいて div の背景色を変更しようとしています。私は次のdivを持っています:

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

{{weather}} の値 (晴れ、曇り) に基づいて、外側の div の背景色を変更したいと考えています。angularでこれを行う最良の方法は何ですか?

Answer 1

@incutonezが言ったように、次を使用できますng-class：

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

ここでプランカー。

達成しようとしていることに応じて、@ Cherniv が提案したように、ディレクティブを作成する方が適切な場合があります。