以角度更改 div 的背景颜色

Posted 2023-02-21

【中文标题】以角度更改 div 的背景颜色

【英文标题】：Change the background color of a div in angular

【发布时间】：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 中。

【参考方案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 的不同方法。