Hey there, I'm dealing with the following code:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.boxList = [{
color: 'red'
}, {
color: '#F8F8F8'
}, {
color: 'rgb(50, 77, 32)'
}];
});.box {
width: 15px;
height: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="box in boxList" class="box" ng-style="{'background-color': box.color}"></div>
</div>I want to iterate through the boxList using ng-repeat and assign different background colors (text, hex or rgb) to my div boxes. There should be three boxes each with a unique color. I tried using ng-style as suggested by some examples on Stack Overflow, but it doesn't seem to work. Any thoughts on what might be going wrong? Thanks.
UPDATE: SOLUTION ->
ng-style="{'background-color': box.color}The background-color needs to be enclosed in single quotes for it to work properly.