Question

我有一个包含不同成员的对象列表。其中一个是卡片标题所需的背景颜色，显示如下信息：

$scope.eventsDay19 = [{
    eventTitle: 'Title ',
    eventHour: '21:00',
    eventText: 'Presenter:     <b>John</b>',
    eventPlace: 'Central Park',
    eventIcon: "/img/icon-open.png",
    eventColor: "#fafafa"
}];

eventsDay19将通过以下方式展示很多对象：

<div class="list">
    <div class="card"
         ng-repeat="item in eventsDay19"
         ng-style="{ background: item.eventColor }">

        <div class="item item-avatar">
            <img src={{item.eventIcon}}>
            <h2><b>{{item.eventTitle}}</b></h2>
            <p><b>{{item.eventHour}}</b></p>
        </div>

        <div class="item item-body">
            <p ng-bind-html="item.eventText"></p>
            <p>
                <i class="icon ion-map balanced" style="font-size: 25px;"></i>
                &nbsp;&nbsp;{{item.eventPlace}}
            </p>
        </div>

    </div>
</div>

我想以每个对象的eventColor成员指定的颜色设置标题（或整个卡片）。我尝试了ng-style和ng-class，但还没有运气。

我已经尝试过StackOverflow的一些帖子而没有运气。

我做错了什么？

Answer 1

要更改您必须使用的背景颜色＆＃39; background-color＆＃39;而不是＆＃39;背景＆＃39;。

您的代码应该是这样的：

<div class="card" ng-repeat="item in eventsDay19" ng-style="{'background-color': item.eventColor }">

修改

由@ V-Kopio评论

使用背景应该与使用背景颜色一样有效。它只是一个更广泛的样式属性，可以在同一行上指定颜色，图像，定位等。此外，background是一个有效的不带引号的JavaScript属性名称，因此也不应该是一个问题。

问题超出了公布的范围。

Answer 2

你只是遗漏了两件事：首先是你应该使用＆＃39; background-color＆＃39;而不是背景。第二个是，你在属性周围缺少引号。

它应该是这样的：

<div class="card" ng-repeat="item in eventsDay19" ng-style="{ 'background-color': item.eventColor }">

标题卡背景颜色取决于对象成员

2 个答案: