オブジェクトのメンバーに応じたヘッダカードの背景色

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

あなたは2つのことを失っています：最初に、背景の代わりに「背景色」を使用する必要があります。 2つ目は、属性の引用符がないことです。

それは次のようになります。

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

Answer 2

背景色を変更するには、「背景」の代わりに「背景色」を使用する必要があります。

あなたのコードは、そのようなものでなければなりません：

としての@でコメントし

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

---

EDIT V-Kopio

使用などとして有効である必要があり、バックグラウンドを使用して背景色。同じ行に色、画像、位置などを指定できる幅広いスタイル属性です。さらに、バックグラウンドは引用符で囲まれていない有効なJavaScriptプロパティー名なので、問題はないはずです。

この問題は投稿されたスコープを超えています。