如何根据angularjs中ng-repeat的选定颜色更改div的背景颜色

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.

我已经尝试了这个片段。我想要的是从3种颜色下面点击任何颜色，上面div的背景颜色应该相应地改变。

Help me where I am making mistake.

帮助我在哪里弄错了。

4 个解决方案

#1

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

首先在控制器中声明$ scope.selectedcolor = {scr：“red”}。

Then change the ng-click to this

然后将ng-click更改为此

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

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>

#2

You need to initialize your selectedcolor object

您需要初始化您的selectedcolor对象

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>

#3

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

您需要在范围中声明selectedcolor对象。只需将它添加到您的范围对象中，就像这样 -

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

#4

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>

#1