CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
ForTheJim
ForTheJim

Reputation: 13

Trying to set a default background picture using Angular.js

I'm new to Angular.js and I'm running into a problem. I'm using ng-repeat to iterate through a list of news items. Each item has a Title and Body, but will have an optional picture url that will be used as the background.

I can get the news item elements with picture URLs to display when there is a url present. See sample code below.

<li class="news-item col-md-6" ng-repeat="announcement in news.announcements | limitTo:8" ng-style="{'background-image': 'url({{announcement.Url}})'}">

I need to set the announcement.Url value to a default background picture URL when announcement.Url is NULL or Undefined. Not sure how I can go about this.

Any help would be much appreciated.

Thanks!

Upvotes: 1

Views: 278

Answers (1)

ChevCast
ChevCast

Reputation: 59244

<li class="news-item col-md-6" ng-repeat="announcement in news.announcements | limitTo:8" ng-style="{'background-image': 'url({{announcement.Url || \'path to default image\'}})'}">

Anything between {{ and }} is an angular expression (similar to javascript itself as far as a beginner is concerned). You can simply include the || operator (a logical OR) and put the path to your default image in a string after that. If announcement.Url is null or undefined then it will be "falsy" and the latter half of the OR conditional will be used.

Edit: Notice that I escaped the string delimiters (\') because they are already nested inside a string that uses those delimiters.

Upvotes: 3

Related Questions