Basically i have a link, and when it's clicked, i display a modal. Now i can display other properties on the modal like title except the background Image ! urghhh !
This is the modal:
<div class="modalContainer" ng-style="{'background-image':'url({{selectedMeal.url}})'}">
<div id="modalHeader">
<div style="padding-top: 10px;">{{selectedMeal.title}}</div>
</div>
</div>
These are the links:
<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."
}
]
}]
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…