如何设置纳克式DIV的背景图像 [英] How to Set Background image of div with ng-style

问题描述

基本上我有一个链接，它的点击时，我显示一个模式。现在我可以除了背景图像显示像称号模态等性能！ urghhh！

这是模态：

 ＆LT; D​​IV CLASS =modalContainerNG式={'背景图像'：'网址（{{selectedMeal.url}}）'}＆GT;                ＆LT; D​​IV ID =modalHeader＆GT;
                ＆LT; D​​IV的风格=填充顶：10px的;＆GT; {{selectedMeal.title}}＆LT; / DIV＆GT;                ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

这些链接：

 ＆LT; D​​IV NG点击='selectMeal（粕）中的菜谱类=contentItemNG重复='饭|过滤：SEARCHTEXT'NG风格={'背景图像'：'网址（{{meal.url}}）'}＆GT;
                    ＆所述;跨度的id =contentItemHeader＆GT; {{meal.title}}＆下; /跨度＆GT;
                    ＆所述;跨度的id =contentItemLevel＆GT; {{meal.level}}＆下; /跨度＆GT;
＆LT; / DIV＆GT;
 

JSON：

 食谱：
    {
      类型：早餐，
      头衔：辣酱汤
      说明：麻辣香辣椒碎牛肉，四季豆，西红柿，洋葱和大蒜最佳服务过饭的酸奶一团，并在上面一些奶酪。
      收视率：4，
      持续时间：12，
      级别：中等，
      \"url\":\"http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg\",
      配料：
          [
            {
              植物人：40毫升
            }
          ]
      方法：
          [
            {
              1：在一个中型汤锅，热油过热爆香洋葱，辣椒智利直到andgarlic软
            }
          ]
    }，    {
      类型：早餐，
      头衔：辣子面，
      说明：麻辣香辣椒碎牛肉，四季豆，西红柿，洋葱和大蒜最佳服务过饭的酸奶一团，并在上面一些奶酪。
      收视率：5，
      持续时间：30，
      级别：热，
      \"url\":\"http://38.media.tumblr.com/875b5eeb5b1efa37d2e9d36fbad836d3/tumblr_mzczesVrZD1rimr6yo1_1280.jpg\",
      配料：
          [
            {
              植物人：40毫升
            }
          ]
      方法：
          [
            {
              1：在一个规模的股票锅，热油过热爆香洋葱，辣椒智利直到andgarlic软
            }
          ]
    }]
 

解决方案

您已经使用单引号，你必须把你的变量单引号外面犯了一些错误。

有关这个DIV

 ＆LT; D​​IV CLASS =modalContainerNG式={'背景图像'：'网址（{{selectedMeal.url}}）'}＆GT;
 

这部分被视为字符串

 '网址（{{selectedMeal.url}}）
 

而你想的角度来分析这个变量

  {{selectedMeal.url}}
 

因此​​，要解决这个问题，正确的语法是

 ＆LT; D​​IV CLASS =modalContainer
  NG-风格={'背景图像'：'URL（'+​​ selectedMeal.url +'）'}＆GT;
 

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."
            }
          ]
    }]

解决方案

You have made some mistakes using single quotes, you have to take your variable outside the single quotes.

For this div

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

This part is being treated as a string

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

Whereas you would want angular to parse this variable

{{selectedMeal.url}}

So to solve this, the correct syntax is

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

这篇关于如何设置纳克式DIV的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！