NG-Show 刺激性图像位移答案

【问题标题】：NG-Show Irritating Image DisplacementNG-Show 刺激性图像位移
【发布时间】：2016-04-27 16:02:16
【问题描述】：

自从我几周前写完本节以来，这个问题就一直困扰着我的应用程序。基本上，我有两张图像，应该根据布尔值一次显示一张。使用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>

是否有解决此问题的方法/更好的解决方案？我现在可以忍受它，但为了波兰，它需要修复。

【问题讨论】：

工作得很好，非常感谢

标签： javascript html angularjs boolean ng-show

【解决方案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>

【讨论】：

这也很好用，非常感谢您的回答！
@TomSykes 哦。很高兴听你这样说。谢谢:)

【解决方案2】：

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

【讨论】：