Header-Karte Hintergrundfarbe abhängig von Objekt Mitglied

Question

Ich habe eine Liste von Objekten mit verschiedenen Mitgliedern. Einer von ihnen ist die gewünschte Hintergrundfarbe für die Kopfzeile einer Karte ihre Informationen wie diese zeigen:

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

Die eventsDay19 wird eine Menge von Objekten Thar haben vorgestellt durch:

<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> 

Ich möchte um die Kopfzeile (oder die gesamte Karte) in der Farbe festzulegen, die von eventColor Mitglied jedes Objekts angegeben wird. Ich habe versucht mit ng-style und ng-class aber noch kein Glück.

Ich habe einige Beiträge von StackOverflow mit Glück versucht.

Was mache ich falsch?

Answer 1

Sie vermissen nur zwei Dinge: Die erste ist, dass Sie 'Hintergrundfarbe' anstelle von Hintergrund verwenden sollten. Die zweite ist, dass Ihnen Zitate um das Attribut fehlen.

Es soll wie folgt aussehen:

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

Answer 2

Um die Hintergrundfarbe zu ändern, muss 'background-color' anstelle von 'background' verwendet werden.

Der Code sollte so ähnlich sein:

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

---

EDIT

Wie kommentiert von @ V-Kopio

Hintergrund verwenden sollten als gültig sein, wie mit Hintergrundfarbe. Es ist nur ein breiteres Stilattribut, das Farbe, Bild, Positionierung usw. in derselben Zeile spezifizieren kann. Darüber hinaus ist Hintergrund ein gültiger, nicht angeführter JavaScript-Eigenschaftsname, daher sollte es auch kein Problem geben.

Das Problem lag außerhalb des angegebenen Umfangs.