設定の背景色ngのリピートを使用した場合

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>

は私がng-repeatとboxListループしたいとbackground-color（テキストを設定します、16進数またはrgb）私のdivボックスの。だから3つの異なる色を持つ3つのボックスがあるはずです。私はng-styleで試しましたが（stackoverflowでいくつかの例を見ましたが）うまくいきません。何が間違っている、任意のアイデア？ありがとう。

EDIT：SOLUTION - >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>

これはそれを