基于 JSON 属性的角度 img 开关

Angular img switch based on JSON property

本文关键字：img 开关 JSON 属性 基于      更新时间：2023-09-26

所以我试图让一个图标基于包含全部或部分单词的属性，如下面的代码所示。

如果它包含"医疗保健"或"医疗保健....."，它会从一条路径中抓取图像，否则，它会从另一条路径中抓取图像。似乎我会将其嵌入到 ng-show 中，但似乎无法使我的语法正确或其他内容，并且不确定我将如何组合 img 标签。

你们中有人知道这是怎么做到的吗？我现在的代码是：

<div class="col-md-2 oeCol">
    <img ng-show="benefit.benefitName('Health Care') ? src='ppt/assets/beneTiles/HealthCare.svg' : src='ppt/assets/beneTiles/DayCareFSA.svg' ">
</div>

我目前根本没有 img。

<div class="col-md-2 oeCol">
    <img ng-src="{{benefit.benefitName('Health Care') ? 'ppt/assets/beneTiles/HealthCare.svg' : 'ppt/assets/beneTiles/DayCareFSA.svg'}}">
</div>

使用 ng-src 并且只指定路径，而不是src=...，我认为它需要双卷曲 （{{...}}） 才能执行表达式

ng-show只返回一个布尔值，指示节点是否应该显示。因此，ng-show中包含的src属性只是作为布尔检查的一部分被吞噬。您应该能够尝试ng-src并在那里输出您的路径以显示图像。理想情况下，切换 src 的逻辑将从视图中提取并提取到控制器（或指令）中。但是，如果没有，您也可以在 DOM 上添加两个<img>元素，每个元素都有一个 ng-show/ng-hide 属性，指示它们是否应该显示在页面上（取决于您指示的 json 属性）。这只是伪代码，但它看起来像这样：

<div ng-controller="MyController as ctrl">
  <img ng-src="ctrl.source()" />
</div>

附言查看比利·穆恩（Billy Moon）在检查dom本身中的json属性时发布了什么。

希望有帮助。

相关文章：