Установить цвет фона для DIV при использовании нг-повтора

Question

Привет У меня есть код последующие:

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>

Я хотел бы мертвую boxList с ng-repeat и установить background-color (текст , hex или rgb) для поля div. Поэтому должны быть три коробки с тремя разными цветами. Я попробовал его с ng-style (видел несколько примеров в stackoverflow), но он не работает. Что не так, какие-то идеи? Благодарю.

EDIT: РЕШЕНИЕ ->ng-style="{'background-color': box.color}

background-color должен быть в пределах ''.

Answer 1

здесь вы идете:

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>

Ты синтаксис был выключен, вы пропустили некоторые цитаты а также должен был использовать интерполяцию ({{variable}}) для рендеринга значения.

Это единственное, что я изменил: ng-style="{'background-color':'{{box.color}}'}", чтобы вы могли видеть разницу. Удачи;)

Answer 2

<div ng-app="myApp" ng-controller="myController"> 
 
     <div ng-repeat="box in boxList" class="box" style="background : {{box.color}}"> 
 
</div>

Думаю, что это нужно сделать, это