kankamuso kankamuso - 4 months ago 11
AngularJS Question

Header card background color depending on object member

I have a list of objects with different memebers. One of them is the desired background color for the header of a card showing its information like this:

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


The eventsDay19 will have a lot of objects thar are presented through:

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


I would like to set the header (or the whole card) in the color specified by
eventColor
member of each object. I have tried with
ng-style
and
ng-class
but no luck yet.

I have tried some posts from StackOverflow with no luck.

What am I doing wrong?

Answer

You're just missing two things: The first is you should be using 'background-color' instead of background. The second is, you're missing quotes around the attribute.

It should look like this:

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