基於JSON屬性的Angular img開關

Question

因此，我嘗試根據包含全部或部分單詞的屬性，使圖標成為另一個圖標，如下面的代碼所示。

如果包含“ Health Care”或“ Health Care .....”，則它從一個路徑獲取圖像，否則，從另一路徑獲取圖像。 似乎我會將其嵌入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=... ，並且我認為它需要double curlies（ {{...}} ）才能執行表達式

Answer 2

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>

PS檢查比利·穆恩（Billy Moon）發布的內容，以及檢查dom本身的json屬性。

希望能有所幫助。