How to dynamically add classes to other elements on click with Angular

Question

I am trying to make a exercise where there are 4 different color boxes and 1 main box below them that is blank, when you click on one of the colored boxes, the main box changes to the color of the box you just clicked on. This seems like a piece of cake with jQuery but I don't know how to do this with Angular

(function() {
  'use strict';

function angularBoxesCtrl() {
  var vm = this;
  vm.mainBoxColor;

  vm.logClass = function(e) {
    var boxColor = e.target.classList[1];
    vm.mainBoxColor = boxColor;
    console.log(vm.mainBoxColor);
  }

}



angular.module('angularBoxes', [])
  .controller('angularBoxesCtrl', [
    angularBoxesCtrl
    ]);


})();

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular Boxes</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body ng-app="angularBoxes">
  <div ng-controller="angularBoxesCtrl as vm" class="boxHolder">
    <div ng-click="vm.logClass($event)" class="box green"></div>
    <div ng-click="vm.logClass($event)" class="box blue"></div>
    <div ng-click="vm.logClass($event)" class="box red"></div>
    <div ng-click="vm.logClass($event)" class="box yellow"></div>
  </div>
  <div class="mainBox" ng-class></div>

  <!-- scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="app.js"></script>

</body>
</html>

CSS

div {
  box-sizing: border-box;
}
.boxHolder {
  border: 1px solid black;
  text-align: center;
  font-size: 0;
}

.box {
  width: 180px;
  height: 180px;
  display: inline-block;
  border: 1px solid black;
  margin: 4px;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.mainBox {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
  position: relative;
  top: 80px;
}

there is an example that basically does this exact thing on the documentation page for ng-class. docs.angularjs.org/api/ng/directive/ngClass — Claies
– Claies, Commented Jan 11, 2016 at 6:39
I just realized my mistake was not ngClass but not having the mainBox be part of the ngController facePalm — WinchenzoMagnifico
– WinchenzoMagnifico, Commented Jan 11, 2016 at 16:53

Punit Gajjar · Accepted Answer · 2016-01-11 07:27:05Z

You can try this code.

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
 </head>

 <body>
  <input type="button" value="Red" ng-click="myStyle={background:'red'}">
  <input type="button" value="Green" ng-click="myStyle={background:'green'}">
  <input type="button" value="Blue" ng-click="myStyle={background:'blue'}">
  <input type="button" value="Yellow" ng-click="myStyle={background:'yellow'}">
  <input type="button" value="Lime" ng-click="myStyle={background:'lime'}">
  <input type="button" value="Magenta" ng-click="myStyle={background:'magenta'}">
  <input type="button" value="Pink" ng-click="myStyle={background:'pink'}">
  <input type="button" value="White" ng-click="myStyle={background:'white'}"> 

  <div ng-style="myStyle" >
    </BR></BR></BR></BR></BR>
    <Center>
    <h1>Hello</BR>
     C-Sharp</BR>
     Corner</BR>
    POST BY: Punit Gajjar
    </H1></center></BR></BR></BR></BR></BR>
   </div>
 </body>
</html>

amarmishra · Accepted Answer · 2016-01-11 07:20:36Z

0

Try this code :

<div ng-init="setFromDiv = 'green'" ng-click="setFromDiv = 'green'"class="box green"></div>
<div ng-click="setFromDiv = 'blue'" class="box blue"></div>
<div ng-click="setFromDiv = 'red'" class="box red"></div>
<div ng-click="setFromDiv = 'yellow'" class="box yellow"></div>
<div class="mainBox" ng-class="setFromDiv"></div>

answered Jan 11, 2016 at 7:20

amarmishra

6136 silver badges15 bronze badges

Comments

Navoneel Talukdar · Accepted Answer · 2016-01-11 08:16:41Z

0

You can simply do like this

<div class="mainBox" ng-style="{'background-color': {{myColor}}}"></div>

On your button click call function

<a ng-click="SetClass($event)" class="green">Make Green</a>

$scope.SetClass = function(obj) {           

        //console.log(obj);            
        // Alert just the data value
        $scope.myColor = obj.target.attributes.class.value;

    }

or you can set a variable which contains css like this

 $scope.myStyle = {
          "background": obj.target.attributes.class.value;
        };

Then use in ng-style as usual way.

 <div ng-style="myStyle"></div>

edited Jan 11, 2016 at 8:16

answered Jan 11, 2016 at 7:39

Navoneel Talukdar

4,6365 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to dynamically add classes to other elements on click with Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related