将ng-repeat值赋给样式属性

时间:2018-03-23 09:39:15

标签: css angularjs

我有一个ng-repeater,它通过一个角度类成功地从控制器获取值。但是我有一个double值,我试图分配给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}}值设置背景颜色或宽度吗?

1 个答案:

答案 0 :(得分: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>