CODEWITHSUNDEEP
javascriptangularjsbackgroundangularjs-ng-repeat
Mohammed
Mohammed

Reputation: 329

How to change the background color of div based on selected color from ng- repeat in angularjs

var addnew = angular.module('tailorapp',[]);


addnew.controller('mainController', function($scope,$rootScope) {
console.log('dd');
$scope.colors = [{
    c: 'green'
  }, {
   c: '#F8F8F8'
  }, {
    c: 'rgb(50, 77, 32)'
}];




});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="tailorapp" ng-controller="mainController">
    <div style="height:100px;width:300px;border:1px red solid; background:red" ng-style="{'background-color': {{selectedcolor.scr}} }" ng-model="divison">

    </div>


    <div ng-repeat="color in colors" style="width:100px; height:100px; display:inline-block"  ng-style="{'background-color': color.c}"  ng-click="selectedcolor.scr=black">
</div>
</body>
</html>

I have tried this snippet.What I am trying to get is onclick of any of the color from below 3 colors, background color of above div should get changed accordingly.

Help me where I am making mistake.

Upvotes: 0

Views: 735

Answers (4)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

first declare $scope.selectedcolor = {scr:"red"} in the controller.

Then change the ng-click to this

ng-click="selectedcolor.scr = color.c"

Demo

var addnew = angular.module('tailorapp',[]);


addnew.controller('mainController', function($scope,$rootScope) {
console.log('dd');

$scope.selectedcolor = {scr:"red"}
$scope.colors = [{
    c: 'green'
  }, {
   c: '#F8F8F8'
  }, {
    c: 'rgb(50, 77, 32)'
}];




});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<div ng-app="tailorapp" ng-controller="mainController">
   
    
    <img  style="height:100px;width:300px;border:1px red solid;opacity: 0.5" src="http://singer.developer.12thdoor.com/apis/media/tenant/image/estimate/11721715563956.png" ng-style="{'background-color': selectedcolor.scr }" ng-model="divison">
    <br>

    <div ng-repeat="color in colors" style="width:100px; height:100px; display:inline-block"  ng-style="{'background-color': color.c}"  ng-click="selectedcolor.scr = color.c">
</div> 
</div>

Upvotes: 1

Weedoze
Weedoze

Reputation: 13943

You need to initialize your selectedcolor object

var addnew = angular.module('tailorapp', []);
addnew.controller('mainController', function($scope, $rootScope) {
  $scope.selectedcolor = {};
  $scope.colors = [{
    c: 'green'
  }, {
    c: '#F8F8F8'
  }, {
    c: 'rgb(50, 77, 32)'
  }];
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>

<body ng-app="tailorapp" ng-controller="mainController">
  <div style="height:100px;width:300px;border:1px red solid; background:red" ng-style="{'background-color': selectedcolor.scr }" ng-model="divison">

  </div>


  <div ng-repeat="color in colors" style="width:100px; height:100px; display:inline-block" ng-style="{'background-color': color.c}" ng-click="selectedcolor.scr = color.c;">
  </div>
</body>

</html>

Upvotes: 2

Kamesh
Kamesh

Reputation: 1152

You need to have selectedcolor object to be declared in your scope. Simply add it to your scope object like this - 

addnew.controller('mainController', function($scope,$rootScope) {
console.log('dd');
$scope.selectedcolor = ""
$scope.colors = [{
    c: 'green'
  }, {
   c: '#F8F8F8'
  }, {
    c: 'rgb(50, 77, 32)'
}];
});

Upvotes: 1

Pramod_Para
Pramod_Para

Reputation: 681

Here is the working version of your code.

<html ng-app="tailorapp">

<head>
    <meta charset="utf-8">
    <title>ng app</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
    <script>
    var addnew = angular.module('tailorapp',[]);

    addnew.controller('mainController', function($scope) {

    $scope.colors = [{
        c: 'green'
     }, {
        c: '#F8F8F8'
     }, {
        c: 'rgb(50, 77, 32)'
    }];



    $scope.setColor = function(value){
          $scope.selectedcolor = value;
    }


  });
    </script>
</head>

<body ng-app="tailorapp" ng-controller="mainController">
<div style="height:100px;width:300px;border:1px red solid; background:red" ng-style="{'background-color': selectedcolor }" ng-model="divison">

</div>


<div ng-repeat="color in colors" style="width:100px; height:100px; display:inline-block"  ng-style="{'background-color': color.c}"  ng-click="setColor(color.c)">
    {{color.c}}

</div>
</body>
</html>

Upvotes: 0

Related Questions