javascript - 更改背景颜色 ng-click

Question

我是 Angular 的新手，我有一个正在使用的代码笔。当用户单击底部的导航按钮时，我想将另一个 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，但它没有设置要做到这一点。 您可以像这样引用变量 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;
};