Come impostare l'immagine di sfondo di div in stile ng

Question

Fondamentalmente ho un collegamento, e quando si fa clic, visualizzo una modale. Ora posso mostrare altre proprietà sul titolo modale, ad eccezione dell'immagine di sfondo! urghhh!

Questo è il modal:

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

       <div id="modalHeader"> 
       <div style="padding-top: 10px;">{{selectedMeal.title}}</div> 

       </div> 
</div> 

Questi sono i link:

<div ng-click='selectMeal(meal)' class="contentItem" ng-repeat='meal in recipes | filter:searchText' ng-style="{'background-image':'url({{ meal.url }})'}"> 
        <span id="contentItemHeader">{{ meal.title }}</span> 
        <span id="contentItemLevel">{{ meal.level }}</span> 
</div> 

JSON:

recipes:[ 
    { 
     "type": "Breakfast", 
     "title": "Chili con carne", 
     "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.", 
     "ratings": 4, 
     "duration": 12, 
     "level":"medium", 
     "url":"http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg", 
     "ingredients": 
      [ 
      { 
       "vegetable": "40ml" 
      } 
      ], 
     "method": 
      [ 
      { 
       "1": "In a medium sized stock pot, heat the oil over heat. Saute onions, chile peppers andgarlic until soft." 
      } 
      ] 
    }, 

    { 
     "type": "Breakfast", 
     "title": "Spicy Noodle", 
     "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.", 
     "ratings": 5, 
     "duration": 30, 
     "level":"hot", 
     "url":"http://38.media.tumblr.com/875b5eeb5b1efa37d2e9d36fbad836d3/tumblr_mzczesVrZD1rimr6yo1_1280.jpg", 
     "ingredients": 
      [ 
      { 
       "vegetable": "40ml" 
      } 
      ], 
     "method": 
      [ 
      { 
       "1": "In a sized stock pot, heat the oil over heat. Saute onions, chile peppers andgarlic until soft." 
      } 
      ] 
    }] 

Answer 1

Hai fatto degli errori usando le virgolette singole, devi prendere la tua variabile al di fuori delle virgolette singole.

Per questo div

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

Questa parte viene trattato come una stringa

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

Mentre si vorrebbe angolare per analizzare questa variabile

{{selectedMeal.url}} 

Quindi, per risolvere questo, la sintassi corretta è

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

Answer 2

sintassi corretta background-image per IS:

background-image: url("src"); 

sintassi corretta per il GN-stile è:

<div ng-style="{'background-image':'url({{re.url}})'}" ></div> 

ad esempio:

<div ng-repeat="re in recipes"> 
<div ng-style="{'background-image':'url({{re.url}})'}" style="height: 100px"></div> 
</div> 

JSFiddle: http://jsfiddle.net/U3pVM/7194/

anche È possibile utilizzare direttiva personalizzato:

app.directive('backgroundImageDirective', function() { 
    return function (scope, element, attrs) { 
     element.css({ 
      'background-image': 'url(' + attrs.backgroundImageDirective + ')', 
      'background-repeat': 'no-repeat', 
     }); 
    }; 
}); 

ad esempio:

<div ng-repeat="re in recipes"> 
<div background-image-directive="{{re.url}}" style="height: 100px"></div> 
</div> 

JSFiddle: http://jsfiddle.net/U3pVM/7193/

Aggiornamento:

<div ng-style="'{{re.url}}' != '' && {'background-image':'url({{re.url}})'}" style="height: 100px"></div> 

che non avrebbe tentato di recuperare un'immagine non-esistente.

Answer 3

Inoltre è possibile utilizzare

<div ng-repeat="re in recipes"> 
<div style="background-image:url({{re.url}} || default-background.png);height: 100px;"></div> 
</div> 

Answer 4

Questo è un lavoro per me.Se siete recuperare dati da JSON o qualsiasi altro provare questo

<div class="your-class" [style.background-image]="'url(' + url.image + ')'" [ngStyle]="{ 'background-size': 'cover','background-repeat': 'no-repeat'} ">