css - 将 ng-repeat 值分配给样式属性

Question

我有一个 ng-repeater，它通过 Angular 类成功地从 Controller 获取值。但是我有一个双值，我试图将其分配给 div 的样式。是否可以将返回的 ng-repeat 值分配给 div 的样式属性？

<div class="panel panel-default" ng-controller="HomeController" ng-init="init()">
<pre>{{ClockLogic}}</pre>
<br />
<br />
<div id="containerDiv" style="width: 100%;">
    <div id="clockDiv" style="width: 800px;" ng-repeat="clock in ClockLogic">
            <div class="row" id="clockwidget" style="background-color: "{{clock.LogicColor}};">
                <p>hello</p>
            </div>

        </div>
    </div>

Angular :

 $scope.ClockLogic = [{
        LogicID: '',
        LogicClockWidth: '',
        LogicMaxWidth: '',
        LogicColor: ''
    }]

    $http.get('/Home/SetClockTimes')
        .then(function (response) {
            $scope.ClockLogic = response.data;
            console.log("status:" + response.status);
            console.log("data: " + $scope.ClockLogic);

        }).catch(function (response) {
            console.error('Error occurred:', response.status, response.data);
        }).finally(function () {
            console.log("Task Finished.");
        });

谁能帮我根据 {{clock}} 值设置背景颜色或宽度？

Answer 1

试试这个:

<div class="panel panel-default" ng-controller="HomeController" ng-init="init()">
<pre>{{ClockLogic}}</pre>
<br />
<br />
<div id="containerDiv" style="width: 100%;">
    <div id="clockDiv" style="width: 800px;" ng-repeat="clock in ClockLogic">
            <div class="row" id="clockwidget" ng-style="{'background-color': clock.LogicColor}">
                <p>hello</p>
            </div>

        </div>
    </div>