Comment Définir l'image de Fond de la div avec ng-style
Fondamentalement, j'ai un lien, et quand il est cliqué, j'affiche un modal. Maintenant, je peux afficher d'autres propriétés sur le modèle, comme le titre l'exception de l'Image de fond ! urghhh !
C'est le modal:
<div class="modalContainer" ng-style="{'background-image':'url({{selectedMeal.url}})'}">
<div id="modalHeader">
<div style="padding-top: 10px;">{{selectedMeal.title}}</div>
</div>
</div>
Voici les liens:
<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."
}
]
}]
Vous devez vous connecter pour publier un commentaire.
Vous avez fait quelques erreurs à l'aide de guillemets simples, vous devez prendre la variable en dehors de la simple quotes.
Pour cette div
Cette partie est traitée comme une chaîne
Alors que vous voulez angulaire pour analyser cette variable
Donc, pour résoudre ce problème, la syntaxe correcte est
Syntaxe correcte pour background-image:
Syntaxe correcte pour la ng-style:
par exemple :
JSFiddle : http://jsfiddle.net/U3pVM/7194/
aussi Vous pouvez utiliser personnalisé directive :
par exemple :
JSFiddle : http://jsfiddle.net/U3pVM/7193/
Mise à jour :
qui ne serait pas tenter de récupérer une non-image existante.
C'est un travail pour moi. Si vous êtes récupérer des données à partir json ou de tout autre essai cette