kankamuso kankamuso - 1 year ago 53
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}}>

<div class="item item-body">
<p ng-bind-html="item.eventText"></p>
<i class="icon ion-map balanced" style="font-size: 25px;"></i>


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

I have tried some posts from StackOverflow with no luck.

What am I doing wrong?

Answer Source

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