Question

我想在点击特定div时更改div的bg颜色。 div放置在滑块面板中。例如，如果单击“主页”，则会隐藏滑块并打开主面板。再次当我打开滑块时，应保留bg颜色以表示我在Home面板中。我尝试使用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>

Answer 1

您的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的不同方法。

Answer 2

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

Reference

以角度更改div的背景颜色

2 个答案: