改变背景颜色 ng-click

Question

我是一名 Angular 新手，正在使用 CodePen 进行编码。当用户点击底部的导航按钮时，我想将另一个 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;
};

});

- LadyT

Answer 1

实际上，您不需要编写一个函数来使其工作（除非您想要做比您指定的更多的事情）。您可以在HTML中使用ngClick设置一个变量，并将该变量用作您的背景颜色。

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 使用，但它并没有设置成这样。 你可以像这样引用变量 theClass：

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

或者修改该函数，在没有参数的情况下不将theClass设置为未定义：

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

- HankScorpio

---

谢谢！这正是我正在做的。尝试使用get和set，但我明白你的意思了！ - LadyT

Answer 2

这里是一个 CodePen，包含了你想要的内容：

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>

- Luc Laverdure

Answer 3

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

第一个问题是您通过 html 调用该方法：

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

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

希望这可以帮助。

- Diana R