Javascript 更改背景颜色并单击

我对angular是个新手，我有一个密码笔在里面工作。当用户单击底部的导航按钮时，我想将另一个div的背景色更改为按钮的相应颜色。我不确定实现这一目标的最佳方式。下面是我的代码

指向代码笔编辑器的链接

HTML

<div class="wrapper" ng-app="mobile">
<div class="phone">
    <div class="page" ng-controller="Screen">
        <div class="top_background" ng-style="{'background-color': changeScreen()}">
            <i class="fa fa-signal sigs"></i>
            <i class="fa fa-wifi sigs"></i>
            <i class="fa fa-battery-full bats"></i>
            <span class="times">11:44am</span>

            <div class="home">
                <h5 class="text-center"><i class="fa fa-user"></i>   Account</h5>
            </div>
            <div class="navigation">
                <div class="col-sm-3 homes" ng-style="{'background-color': '#C0392B'}" ng-click="changeScreen('#C0392B')">
                    <h4><i class="fa fa-home"></i></h4>
                </div>
                <div class="col-sm-3 shop" ng-click="" ng-style="{'background-color': '#E74C3C'}">
                    <h4><i class="fa fa-shopping-cart"></i></h4>
                </div>
                <div class="col-sm-3 feeds" ng-click="" ng-style="{'background-color': '#E67E22'}">
                    <h4><i class="fa fa-comment"></i></h4>
                </div>
                <div class="col-sm-3 settings" ng-click="" ng-style="{'background-color': '#F39C12'}">
                    <h4><i class="fa fa-cog"></i></h4>
                </div>
            </div>
        </div>
    </div>
</div>

---

}))

您实际上不需要编写函数来实现这一点（除非您想做比指定更多的事情）。您可以使用ngClick设置变量，也可以使用该变量作为背景色，所有这些都在HTML中

或者，当您在没有参数的情况下运行函数时，将其修改为不将类设置为未定义：

$scope.changeScreen = function(myClass) {
  if(angular.isDefined(myClass)){
    $scope.theClass = myClass;
  }
  console.log('the class', $scope.theClass);
  return $scope.theClass;
};

---

这是一个你想要的代码笔：

仅更改HTML：

<div class="wrapper" ng-app="mobile" ng-init="bgCol='#F39C12'">
<div class="phone">
<div class="page" ng-controller="Screen">
  <div class="top_background" style="background-color: {{bgCol}}">
    <i class="fa fa-signal sigs"></i>
    <i class="fa fa-wifi sigs"></i>
    <i class="fa fa-battery-full bats"></i>
    <span class="times">11:44am</span>

    <div class="home">
      <h5 class="text-center"><i class="fa fa-user"></i>   Account</h5>
    </div>
    <div class="navigation">
      <div class="col-sm-3 homes" ng-style="{'background-color': '#C0392B'}" ng-click="bgCol='#C0392B'">
        <h4><i class="fa fa-home"></i></h4>
      </div>
      <div class="col-sm-3 shop" ng-click="bgCol='#E74C3C'" ng-style="{'background-color': '#E74C3C'}">
        <h4><i class="fa fa-shopping-cart"></i></h4>
      </div>
      <div class="col-sm-3 feeds" ng-click="bgCol='#E67E22'" ng-style="{'background-color': '#E67E22'}">
        <h4><i class="fa fa-comment"></i></h4>
      </div>
      <div class="col-sm-3 settings" ng-click="bgCol='#F39C12'" ng-style="{'background-color': '#F39C12'}">
        <h4><i class="fa fa-cog"></i></h4>
      </div>
    </div>
  </div>
</div>
</div>

上午11:44
账户

代码中的问题非常小。检查示例以了解其工作原理

第一个问题是在html中通过以下方式调用该方法：

    <div class="top_background" ng-style="{'background-color': changeScreen()}">

请注意-未向方法传递任何参数。 但在angularjs中，该方法需要一个类名。 其次，最好按照我提供的示例将整个样式放在一个对象中，因为如果有其他一些样式属性，可以将它们添加到其中，而不在ng样式中调用另一个函数

---

希望这有帮助。

谢谢！！这正是我在做的。试着去做，但我明白你在说什么！！

$scope.changeScreen = function(myClass) {
  if(angular.isDefined(myClass)){
    $scope.theClass = myClass;
  }
  console.log('the class', $scope.theClass);
  return $scope.theClass;
};

<div class="wrapper" ng-app="mobile" ng-init="bgCol='#F39C12'">
<div class="phone">
<div class="page" ng-controller="Screen">
  <div class="top_background" style="background-color: {{bgCol}}">
    <i class="fa fa-signal sigs"></i>
    <i class="fa fa-wifi sigs"></i>
    <i class="fa fa-battery-full bats"></i>
    <span class="times">11:44am</span>

    <div class="home">
      <h5 class="text-center"><i class="fa fa-user"></i>   Account</h5>
    </div>
    <div class="navigation">
      <div class="col-sm-3 homes" ng-style="{'background-color': '#C0392B'}" ng-click="bgCol='#C0392B'">
        <h4><i class="fa fa-home"></i></h4>
      </div>
      <div class="col-sm-3 shop" ng-click="bgCol='#E74C3C'" ng-style="{'background-color': '#E74C3C'}">
        <h4><i class="fa fa-shopping-cart"></i></h4>
      </div>
      <div class="col-sm-3 feeds" ng-click="bgCol='#E67E22'" ng-style="{'background-color': '#E67E22'}">
        <h4><i class="fa fa-comment"></i></h4>
      </div>
      <div class="col-sm-3 settings" ng-click="bgCol='#F39C12'" ng-style="{'background-color': '#F39C12'}">
        <h4><i class="fa fa-cog"></i></h4>
      </div>
    </div>
  </div>
</div>
</div>

    <div class="top_background" ng-style="{'background-color': changeScreen()}">