如何使用ng-style设置div的背景图片

2024-04-22

基本上我有一个链接,当单击它时,我会显示一个模式。现在我可以在模态上显示其他属性,例如标题,除了背景图像之外!呃呃!

这是模态:

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

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

                </div>
</div>

这些是链接:

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

您在使用单引号时犯了一些错误,您必须将变量放在单引号之外。

对于这个div

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

这部分被视为字符串

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

而你希望 Angular 来解析这个变量

{{selectedMeal.url}}

所以要解决这个问题,正确的语法是

<div class="modalContainer" 
  ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用ng-style设置div的背景图片 的相关文章

随机推荐

  • PHP 如何在没有 system() 或 exec() 的情况下 ping 服务器

    我正在尝试 ping 服务器 但我的主机被禁用exec and system 由于安全原因 是否还有其他选项可以让它工作 或者我是否必须要求我的主机启用它们 我得到的错误 警告 出于安全原因 system 已被禁用警告 出于安全原因 exe
  • 无法解决 select 语句中第 5 列的排序规则冲突

    我试图将多个字段的组合显示为一个 客户要求我这样做 我尝试了以下命令 但收到上述错误 SQL 片段 SELECT dbo VPayment 2 Serial dbo VPayment 1 Description dbo VPayment 2
  • 在Python中循环多个字典的最佳方法

    我搬字典 user name Bob age 11 place moon dob 12 12 12 user1 name John age 13 place Earth dob 12 12 12 通过加 1 循环遍历每个用户的最佳方法是什么
  • PHP 是如何工作的以及它的架构是什么?

    伙计们 最近我决定回到 PHP 并做一些比简单登录页面更复杂的事情 三年来我一直使用 Java JavaEE 进行编程 并且对 Java 应用程序的架构有很好的理解 基本上 一个虚拟机 一个简单的操作系统进程 运行称为字节码的编译代码 一个
  • Swift 优化级别破坏了 NSArray 到 Array 的转换

    以下 有点人为的 代码在以下情况下有效 快速优化级别被设定为无 Onone 默认用于调试 let nsa NSArray array foo bar let a nsa as String 但应用程序崩溃了 崩溃日志 http pasteb
  • 递归比较目录的 Shell 脚本

    我在外部硬盘驱动器上有一个几个月前的文件服务器备份 用于从那时起就出现故障的文件服务器 大部分数据已恢复到此后一直使用的临时文件服务器上 但存在一些不一致之处 我将安装外部并将其与当前数据同步 但首先我需要建立已在较新副本上更新的文件 我可
  • 如何检测用户是否为我的应用启用了 iCloud?

    我开发了一个支持 iCloud 的 iPhone 应用程序 但我面临的问题是 即使用户关闭我的应用程序的 iCloud 备份 它也会在 iCloud 上备份并反映我其他设备上的更改 所以我想知道如何我能知道我的应用程序是否启用了 iClou
  • .NET MAUI 导航动画

    如果我想在 MAUI 中为从一个页面到另一页面的过渡设置动画 我需要使用以下命令激活它true value await Shell Current GoToAsync nameof DashboardPage true 这会动画化页面从右到
  • Java 和 Jabber/Smack [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试使用最新版本的 Smack 3 2 1 编写一个简单的示例 以便在两个帐户之间发送和接收消息 Connection connec
  • 比较击键 - 装配 CCS64

    I want to compare keystrokes in assembly CCS64 If I type in the same key in a row I want to do something example A A do
  • 如何从 Youtube 嵌入中删除暂停菜单视频建议/相关视频(类:ytp-pause-overlay)

    当我的嵌入视频暂停时 YouTube 显示带有视频建议的菜单 iframe 中的元素具有类 ytp pause overlay 如何在不删除控件的情况下删除它 如果您使用 Javascript 加载视频YouTube 播放器 iframe
  • 一个 AndroidManifest.xml 中包含两个 searchable.xml 活动

    我有一个 Android 应用程序 其中有一些不同的活动用于浏览从 RSS 下载的文章和图像 我希望能够提供连接搜索对话框中的搜索按钮 http developer android com intl zh TW guide topics s
  • 如何使用 PhantomReference 作为 Finalize() 替代

    Javadoc 8 的虚拟参考 http docs oracle com javase 8 docs api java lang ref PhantomReference html状态 虚拟引用最常用于调度验尸前与 Java 终结机制相比
  • Floyd Warshall 算法的时间复杂度

    Skiena 的算法书包含以下解释弗洛伊德 沃歇尔算法 http en wikipedia org wiki Floyd E2 80 93Warshall algorithm floyd adjacency matrix g int i j
  • 从MAC地址获取IP。 arp -a 不显示设备

    我正在尝试编写一个批处理文件 该文件应该在连接到网络 腾达 WiFi 路由器 时找到我的 Android 手机的动态分配的 IP 所以我正在尝试arp a并搜索我手机的 MAC 地址 以便我可以从表中获取其 IP C Users Leero
  • Firestore 增量 FieldValue

    所以 我知道有一些类似名称的问题 但这并不相同 我很好奇是否有人可以解释缺乏的原因increment哨兵 类似于delete one 据我所知 字段删除与文档更新没有什么不同 意思是 我可以delete我的字段只需将整个文档更新为一些新数据
  • 计算非连续值

    所以我有以下结构 guid current level current value pk a 100 12 1 a 200 12 2 a 200 12 3 a 200 12 4 a 200
  • 二分查找条件[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我总是对二分搜索算法的条件感到困惑 并且在编程竞赛中花费了我很多时间 我的问题是何时使用这些条件 1 while low lt high 2
  • 自 Android studio 3.5 起,辅助服务在每次运行时都会自动关闭

    由于我将 Android Studio 更新到 3 5 当我启动 Run 来构建和部署我的应用程序时 我的自定义辅助功能服务会自动关闭 不是崩溃 只是在设置中关闭 你能帮我吗 发生的情况是 Studio 在重新安装新版本之前强制停止该服务
  • 如何使用ng-style设置div的背景图片

    基本上我有一个链接 当单击它时 我会显示一个模式 现在我可以在模态上显示其他属性 例如标题 除了背景图像之外 呃呃 这是模态 div class modalContainer div div style padding top 10px s