如何基于AngularJS中的ng-repeat从选定的颜色更改div的背景颜色

Question

 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>

我已经尝试了这个代码片段。我想要得到的是从以下3种颜色中选择任何一种颜色的onclick，上面div的背景色应相应地进行更改。

在我犯错的地方帮我。

Answer 1

您需要初始化您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>

Answer 2

首先在控制器中声明$scope.selectedcolor = {scr:"red"} 。

然后将ng-click更改为此

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

演示

 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>

Answer 3

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

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

Answer 4

这是您的代码的工作版本。

<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>

如何基于AngularJS中的ng-repeat从选定的颜色更改div的背景颜色

问题描述

4 个解决方案

解决方案1
2 2017-03-21 10:07:31

解决方案2
1 已采纳 2017-03-21 10:06:50

解决方案3
1 2017-03-21 10:07:24

解决方案4
0 2017-03-21 10:07:19

如何基于AngularJS中的ng-repeat从选定的颜色更改div的背景颜色

问题描述

4 个解决方案

解决方案1 2 2017-03-21 10:07:31

解决方案2 1 已采纳 2017-03-21 10:06:50

解决方案3 1 2017-03-21 10:07:24

解决方案4 0 2017-03-21 10:07:19

解决方案1
2 2017-03-21 10:07:31

解决方案2
1 已采纳 2017-03-21 10:06:50

解决方案3
1 2017-03-21 10:07:24

解决方案4
0 2017-03-21 10:07:19