Question

我是角色新手，我有一个我正在使用的编解码器。当用户点击底部的导航按钮时，我想将另一个div的背景颜色更改为按钮的相应颜色。我不确定实现这个的最佳方法。这是我下面的代码。

链接到codepen编辑器 http://codepen.io/modDesigns/pen/YyKwGj

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>

Javascript

var app = angular.module('mobile', []);
app.controller('Screen', function($scope) {
$scope.changeScreen = function(myClass) {
    $scope.theClass = myClass;
    return $scope.theClass;
};

}）;

Answer 1

你实际上并不需要编写一个函数来实现这个功能（除非你想做的比你指定的多）。您可以使用ngClick设置变量，并将该变量用作背景颜色，所有这些都在HTML中。

http://codepen.io/anon/pen/JYPJBR

<div class="wrapper" ng-app="mobile">
  <div class="phone">
    <div class="page" ng-controller="Screen">
      <div class="top_background" ng-style="{'background-color': screenColor}">
        <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="screenColor='#C0392B'">
            <h4><i class="fa fa-home"></i></h4>
          </div>
          <div class="col-sm-3 shop" ng-click="screenColor='#E74C3C'" ng-style="{'background-color': '#E74C3C'}">
            <h4><i class="fa fa-shopping-cart"></i></h4>
          </div>
          <div class="col-sm-3 feeds" ng-click="screenColor='#E67E22'" ng-style="{'background-color': '#E67E22'}">
            <h4><i class="fa fa-comment"></i></h4>
          </div>
          <div class="col-sm-3 settings" ng-click="screenColor='#F39C12'" ng-style="{'background-color': '#F39C12'}">
            <h4><i class="fa fa-cog"></i></h4>
          </div>
        </div>
      </div>
    </div>
</div>

但是，如果您只是想知道为什么您的代码不起作用，那是因为您尝试将changeScreen()用作getter和setter，但它和＆＃＃39;没有设置这样做。您可以像这样引用变量theClass：

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

或者在没有参数的情况下运行它时，修改函数不将theClass设置为undefined：

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

Answer 2

这是一个包含你想要的代码：

http://codepen.io/anon/pen/rOBwZV

仅更改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>

Answer 3

您的代码中的问题非常小。请查看this示例，了解其工作原理。

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

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

注意 - 没有参数传递给方法。但是在angularjs方法中，期望一个类名。其次，根据我提供的示例，将整个样式放在对象中会更好，因为如果有其他样式属性，可以在那里添加它们，而不是在ng-style中调用另一个函数。

希望这有帮助。

更改背景颜色ng-click

3 个答案: