How to Set Background image of div with ng-style

by

You have made some mistakes using single quotes, you have to take your variable outside the single quotes.

For this div

<div class="modalContainer" ng-style="{'background-image':'url({{selectedMeal.url}})'}">

This part is being treated as a string

'url({{selectedMeal.url}})'

Whereas you would want angular to parse this variable

{{selectedMeal.url}}

So to solve this, the correct syntax is 

<div class="modalContainer" 
  ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">

More Related Contents:

  1. ng-model for “ (with directive DEMO)
  2. angularjs 1.6.0 (latest now) routes not working
  3. How to iterate over the keys and values with ng-repeat in AngularJS?
  4. AngularJS execution order with `$q` — Chaining Promises
  5. Show spinner GIF during an $http request in AngularJS?
  6. Can you override specific templates in AngularUI Bootstrap?
  7. Angular and SVG filters
  8. Confusing $locationChangeSuccess and $stateChangeStart
  9. Angular UI Router Nested State resolve in child states
  10. Preventing / dealing with double button clicks in angular
  11. Angular pass callback function to child component as @Input similar to AngularJS way
  12. How to parseInt in Angular.js
  13. AngularJS Group By Directive without External Dependencies
  14. AngularJS data bind in ng-bind-html?
  15. Angular orderBy number sorting as text in ng-repeat
  16. Angular UI-Router How to create a “layout” state?
  17. AngularJS – Multiple ng-view in single template
  18. AngularJS : How to use one resolve for all the routes of my application
  19. What is the difference between required and ng-required?
  20. How to trigger a method when Angular is done adding scope updates to the DOM?
  21. Model in a modal window in angularjs is empty
  22. Contenteditable with ng-model doesn’t work
  23. angularjs ui-router – how to build master state which is global across app
  24. AngularJS – why is $apply required to properly resolve a $q promise?
  25. WebAPI CORS with Windows Authentication – allow Anonymous OPTIONS request
  26. Ui-Router $state.go inside $on(‘$stateChangeStart’) is cauzing an infinite loop
  27. How to use the axios library with AngularJS
  28. AngularJS Service Passing Data Between Controllers
  29. Auto logout with Angularjs based on idle user
  30. Angularjs – Hide content until DOM loaded

Leave a Comment