AngularJS 反应图像 (ng-class)

Question

我有 1 张图片的 3 个变体。我需要根据事件状态交换图像，例如：'current' 'onClick' 'onHover'。想要使用标准 Windows 事件。我可以将 Angular 的 'ng-class' 与图像一起使用并添加 onClick & onCover 作为我的 Javascript 测试表达式吗？精确测试事件监听器？！

例如：

这是我客户的要求。可以用 AngularJS.

Answer 1

关于这个问题 here。

有一篇简短但有价值的博客 post

它建议对 mouseover/hover 个事件使用类似于以下的策略...

<div id="divID" ng-init="imgsrc='/images/twitter_blue.png'" ng-mouseover="imgsrc='/images/twitter_brown.png'" ng-mouseout="imgsrc='/images/twitter_blue.png'">
    <img ng-src="{{imgsrc}}"/>
    <div>Image description</div>
</div>

此外，您可以使用 ng-click 来管理 ng-src 中点击事件的变化

<div id="divID" ng-click="updateImageSrc()" ...

Answer 2

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>    /* AngularJS makes UX pretty nice! */

    <div class="col-sm-1">
      <div id="explorer" 
     ng-init="imgsrc='https:///idle.png'" 
ng-mouseover="imgsrc='https:///hover.png'" 
    ng-click="imgsrc='https:///current.png'">
        <img ng-src="{{imgsrc}}" />
        <div>Explore</div>
      </div>
    </div>

AngularJS 反应图像 (ng-class)

AngularJS Reactive Images (ng-class)

angularjs

onclick

ng-class

onhover