Question

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

如果它包含“医疗保健”或“医疗保健.....”，它会从一条路径抓取图像，否则从另一条路径抓取。似乎我会把它嵌入到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。

Answer 1

<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=...，我认为它需要双重curlies（{{...}}）才能执行表达式

Answer 2

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

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

P.S。看看Billy Moon在检查dom本身的json属性时所发布的内容。

希望有所帮助。

基于JSON属性的Angular img开关

2 个答案: