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

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

您只是遗漏了两件事:第一，您应该使用“背景颜色”而不是背景。第二个是，您缺少属性周围的引号。

它应该是这样的:

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