NG-Show 刺激图像位移

Question

自从我几周前写完这一部分以来，这个问题就一直困扰着我的应用程序。基本上我有两张图片，应该根据布尔值一次显示一张。使用 ng-show 指令，当我更新变量两次时，心脏图像被置换，就好像另一个仍然在原地并且不可见（我确信可能是这种情况）。

<i class="icon icon-accessory">
  <img class="padding-basic-right" src="img/love.svg" width="48px" ng-show="track.loved"/>
  <img class="padding-basic-right" src="img/skip.svg" width="48px" ng-show="!track.loved"/>
</i>

是否有 this/a 更好的解决方案？我现在可以忍受它，但为了润色它需要修复。

Answer 1

将 ng-src 与条件 {{}} 插值指令一起使用。

ng-src="{{ track.loved ? 'img/love.svg': 'img/skip.svg'}}"

其他替代方法是使用 ng-if 而不是 ng-show

<i class="icon icon-accessory">
  <img class="padding-basic-right" src="img/love.svg" width="48px" ng-if="track.loved"/>
  <img class="padding-basic-right" src="img/skip.svg" width="48px" ng-if="!track.loved"/>
</i>

Answer 2

您的问题的一个可能原因是您的 CSS 覆盖了 .ng-hide CSS class Angular 当 ngShow 解析为 true 时添加到您的图像.尝试改用 ng-if 指令——这将导致未使用的 img 标签从 DOM 中完全删除。

NG-Show 刺激图像位移

NG-Show Irritating Image Displacement

javascript

html

angularjs

boolean

ng-show