Цвет фона заголовка в зависимости от объекта

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

Вам просто не хватает двух вещей: во-первых, вы должны использовать «background-color» вместо фона. Во-вторых, вам не хватает кавычек вокруг атрибута.

Он должен выглядеть следующим образом:

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

Answer 2

Чтобы изменить цвет фона, вы должны использовать «background-color» вместо «background».

Ваш код должен быть что-то вроде этого:

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

---

EDIT

Как прокомментировал @ V-Kopio

Использование фона должен быть действительным, как использование фоновый цвет. Это просто более широкий атрибут стиля, который может указывать цвет, изображение, позиционирование и т. Д. На одной строке. Futhermore, background - это действительное неуказанное имя свойства JavaScript, поэтому также не должно быть проблемы.

Проблема была за пределами размещенной области.