Изменить цвет фона ng-click

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() и как геттер и сеттер, но он не установлен для этого. Вы можете либо ссылаться на переменную 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; 
}; 

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> 

Answer 3

Вопрос в вашем коде очень крошечный. Проверьте пример this, чтобы увидеть, как он работает.

Первый вопрос не в том, что вы вызываете метод в HTML с помощью:

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

Обратите внимание - ни один параметр передается в метод. Но в методе angularjs ожидается имя класса. Во-вторых, было бы лучше иметь весь стиль в объекте, как показано в примере, поскольку в случае, если будут какие-то другие свойства стиля, их можно добавить туда и не вызвать другую функцию внутри ng-стиля.

Надеюсь, это поможет.