javascript - Change background color ng-click - Stack Overflow

admin管理员组

文章数量:1323330

I am new to angular, and I have a codepen that I am working in. I want to change the background color of another div to the corresponding color of the button when the user clicks the nav buttons at the bottom. I am not sure of the best way to implement this. Here is the code I have below.

Link to the codepen editor

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-ment"></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;
};

});

I am new to angular, and I have a codepen that I am working in. I want to change the background color of another div to the corresponding color of the button when the user clicks the nav buttons at the bottom. I am not sure of the best way to implement this. Here is the code I have below.

Link to the codepen editor 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-ment"></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;
};

});

• javascript
• jquery
• html
• css
• angularjs

Share Follow asked Aug 27, 2015 at 18:13 LadyTLadyT 65922 gold badges1212 silver badges3232 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You actually don't need to write a function to get this working (unless you want to do more than you specified). You can use ngClick to set a variable and also use that variable as your background color, all within the 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-ment"></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>

But, if you just want to know why your code isn't working, it's because you're trying to use changeScreen() as both a getter and a setter, but it's not set up to do that. You could either reference the variable theClass like so:

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

Or else modify the function to not set theClass to undefined when you run it without arguments:

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

Here is a codepen with what you wanted:

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

HTML only is changed:

<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-ment"></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>

The issue in your code is very tiny. Check this example to see how it works.

The first issue is that you call the method in html via:

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

Pay attention - no parameter passed to method. But in angularjs method is expecting a class name. Second, it would be better to have the entire style in an object as per example I provided, because in case there will be some other style properties, they can be added there and not call another function inside ng-style.

Hope this helps.

本文标签： javascriptChange background color ngclickStack Overflow