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>

Plunker在这里。

正如@Cherniv 所建议的那样，根据您要完成的任务，创建指令可能更合适。