以角度更改 div 的背景颜色答案

【问题标题】：Change the background color of a div in angular以角度更改 div 的背景颜色
【发布时间】：2017-02-13 15:26:12
【问题描述】：

我想在单击特定 div 时更改 div 的背景颜色。 div 放置在滑块面板中。例如，如果我单击主页，滑块会被隐藏并且主页面板会打开。同样，当我打开滑块时，应该保留背景颜色以表示我在主页面板中。我尝试使用 ng-style 和 ng-class，但它不起作用。

<div class="menu-grid-con all-icons">
  <div class="row">
    <div class="col col-50 text-center" ng-click="menu.onHomeButtonClick()">
      <img src="images/iconHome.png" class="menu-icons">
      <br> <!-- TODO: to change -->
      <p translate="MENU_HOME" class="menu-icon-text"></p>
    </div>
    <div 
      class="col col-50 text-center" 
      ng-click="menu.onFlyerButtonClick()" 
      ng-style={"background-color:blue;} "
    >
      <img src="images/iconWeeklyFlyer.png" class="menu-weekly-flyer-icons">
      <br> <!-- TODO: to change -->
      <p translate="MENU_WEEKLY" class="menu-icon-text"></p>
    </div>
  </div>
</div>

【问题讨论】：

你能提供 fiddle 你试过的东西吗
我也尝试添加 ng-class。
但是 bg 颜色没有反映在 div 中。

标签： angularjs background-color angularjs-ng-click

【解决方案1】：

ng-style="{'background-color':'#CCCCCC'}">

Reference

【讨论】：

【解决方案2】：

您的ng-style 语法错误。

应该是

ng-style="{'background-color':'blue'}"

请注意 ng-class 采用 css class 而不是单个属性

<div ng-class="bgColor"></div>

CSS

.bgColor{
  background-color:blue;
}

有许多不同的方式来声明ng-class。看看here。

这个有用的 SO post 讨论了在 AngularJS 中有条件地应用 css 的不同方法。

【讨论】：