Wie Hintergrundbild von div mit ng-style

Question

setzen Grundsätzlich habe ich einen Link, und wenn es geklickt wird, zeige ich ein modales. Jetzt kann ich andere Eigenschaften auf dem modalen Titel außer dem Hintergrund Bild anzeigen! Urghhh!

Dies ist der modale:

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

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

       </div> 
</div> 

Dies sind die Verbindungen:

<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

Sie haben einige Fehler gemacht, indem Sie einfache Anführungszeichen verwenden. Sie müssen Ihre Variable außerhalb der Anführungszeichen setzen.

Dazu div

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

Dieser Teil als String behandelt wird

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

Während Sie Winkel würde wollen, dass diese

{{selectedMeal.url}} 

Variable analysieren So dies zu lösen, Die korrekte Syntax lautet

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

Answer 2

korrekte Syntax für Hintergrund-Bild ist:

background-image: url("src"); 

korrekte Syntax für ng-Stil ist:

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

zum Beispiel:

<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/

auch Sie benutzerdefinierte Richtlinie verwenden können:

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

zum Beispiel:

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

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

Update:

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

, die nicht versuchen würde, ein nicht vorhandenes Bild zu holen.

Answer 3

Sie können auch

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

Answer 4

verwenden Diese Arbeit ist für mich.Wenn Sie zum Abrufen von Daten aus json sind oder versuchen, andere diese

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