0

On another thread I got the information that the background can be set dynamically by using mg-style. Unfortunately I can't get it work.

syntax like this:

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}"

I have a fiddle for testing: fiddle

fiddle:

<ion-item class="item-icon-right item-avatar defaultItem" data-ng-repeat="item in items " data-ng-style="{'background-image':'url({{item.url}})'}">

The background-image of the ion-item should be set to the mg-style element.

marcel
  • 3,231
  • 8
  • 43
  • 76
  • It is working as it should: what are you trying to do? – Raghavendra Aug 02 '14 at 12:33
  • I'd like to set a background-image dynamically. The background isn't applied to the background of the list-element .. see question – marcel Aug 02 '14 at 12:53
  • 2
    The background css is applied correctly. That's an ionic issue. It has nothing to do with `ngStyle`. The list item has styles defined in css files supplied by ionic framework doesn't show up background for `ion-item` in `ion-list`. It just applies background-color. The background image is underneath. you can see it if you play around with the div in developer tools – Raghavendra Aug 02 '14 at 13:09
  • Isn't there a workarround for that ... is it possible to set the image by javascript manually? – marcel Aug 02 '14 at 17:45
  • http://stackoverflow.com/questions/17252546/angularjs-ng-style-background-image-isnt-working – Ivanka Todorova Jul 06 '16 at 13:52

1 Answers1

0

Seen elsewhere (Ionic Forums - credit to maxx0r) : don't use ng-style but style instead. That has worked for me. So your example should change as follows:

<ion-item class="item-icon-right item-avatar defaultItem" data-ng-repeat="item in items " style="background-image:url({{item.url}})">

HTH, best regards.

Zalakain
  • 597
  • 5
  • 9
  • you will get invalid urls before item.url is resolved (like %7b%7bitem.url%7d%7d) – NiRR Dec 14 '15 at 11:14
  • Have you tested or are you just "supposing"? I repeat: I got it working that way. So maybe your failure is elsewhere. – Zalakain Dec 17 '15 at 06:58
  • 1
    have tested, have sauce: https://docs.angularjs.org/api/ng/directive/ngSrc Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem. – NiRR Dec 21 '15 at 06:42