AngularJS Image Source Change on Mouseover

Question

I am trying to get an icon to change on mouseover in AngularJS but am experiencing great difficulty. My menus are generated from JSON objects interpreted into HTML by Angular. Each menu item is its own object with its own title, link, icon, and alternative icon.

Currently my HTML is:

    <ul ng-controller="MenuCtrl" class="ul">
    <li class="profile-li" ng-repeat="item in profileItems" style="white-space:nowrap" width="250px">
        <div width="200px">
            <a href="{{item.link}}" class="return">
                <div ng-init="itemsrc='{{item.icon}}'" ng-mouseover="itemsrc='{{item.alticon}}'" ng-mouseout="itemsrc='{{item.icon}}'" >
                    <img class="icon2" ng-src="{{itemsrc}}"  style="display:inline; float:left;">
                    </img>
                </div>
            </a>
            <a href="{{item.link}}" class="return">
                <span style="display:inline; white-space:nowrap;"><br>&nbsp;&nbsp;{{item.profileItem}}</span>
            </a>
        </div>
    </li>       
</ul>

Within a <div> ng-init sets the initial icon to a variable (itemsrc) equivalent to the icon path specified in the JSON object. ng-mouseover and ng-mouseout change this variable to different paths depending on the JSON values. The <img> within the <div> then uses this established variable as its ng-src.

When the page is loaded, the values in the <div> are generated appropriately (they show the correct paths stored in the JSON object), but the <img src> path is still shown in bracketed notation ({{item.icon}} or {{item.alticon}}), rather than an actual path (icon/assessment.png for example) which causes the image to break.

Here is a sample of the JSON object that is being interpreted: `

[
  {
    "contentItem": "Orders",
    "link": "#orders",
    "icon": "icon/orders.png",
    "alticon": "icon/ordersb.png"
  },
  {
    "contentItem": "Medication Admin.", 
    "link": "#medAdmin",
    "icon": "icon/medicationAdmin.png",
    "alticon": "icon/medicationAdminb.png"
  },
  {
    "contentItem": "Lab Results", 
    "link": "#labs",
    "icon": "icon/labs.png",
    "alticon": "icon/labsb.png"
  },
  {
    "contentItem": "Vital Signs", 
    "link": "#vitals",
    "icon": "icon/vitals.png",
    "alticon": "icon/vitalsb.png"
  },
  {
    "contentItem": "Assessment", 
    "link": "#assessment",
    "icon": "icon/assessment.png",
    "alticon": "icon/assessmentb.png"
  },
    {
    "contentItem": "Intake & Output", 
    "link": "#io",
    "icon": "icon/intakeOutput.png",
    "alticon": "icon/intakeOutputb.png"
  }
]

Here's an example of what the HTML looks like in the browser:

<li class="profile-li ng-scope" ng-repeat="item in profileItems" style="white-space:nowrap" width="250px">
            <div width="200px">
                <a href="#face" class="return">
                    <div ng-init="itemsrc='icon/facesheet.png'" ng-mouseover="itemsrc='icon/facesheetb.png'" ng-mouseout="itemsrc='icon/facesheet.png'">
                        <img class="icon2" ng-src="{{item.icon}}" style="display:inline; float:left;" src="{{item.icon}}">

                    </div>
                </a>
                <a href="#face" class="return">
                    <span style="display:inline; white-space:nowrap;" class="ng-binding"><br>&nbsp;&nbsp;Face Sheet</span>
                </a>
            </div>
        </li>

ng-mouseover will evaluate the givin expression. When using quotes in this expression, you are actually passing a string "{{item.altIcon}}" which will not be parsed. Instead, try ng-mouseover="itemsrc=item.alticon" (same for ngMouseout and ngInit) — floribon
– floribon, Commented Feb 18, 2015 at 6:06
That introduces a different issue, results in this: <li class="profile-li ng-scope" ng-repeat="item in profileItems" style="white-space:nowrap" width="250px"> <div width="200px"> <a href="#face" class="return"> <div ng-init="itemsrc=icon/facesheet.png" ng-mouseover="itemsrc=icon/facesheetb.png" ng-mouseout="itemsrc=icon/facesheet.png"> <img class="icon2" style="display:inline; float:left;"> </div> </a> <a href="#face" class="return"> <span style="display:inline; white-space:nowrap;" class="ng-binding"><br>Face Sheet</span> </a> </div> </li> — P Ackerman
– P Ackerman, Commented Feb 18, 2015 at 6:24
@floribon TL,DR: The image tag now has no ng-src or src attribute when the page loads (with method). — P Ackerman
– P Ackerman, Commented Feb 18, 2015 at 7:19
what are you writing in ng-src exactly, {{item.icon}} or {{itemsrc}} ? Also, do you hav any errors in your developper console? — floribon
– floribon, Commented Feb 18, 2015 at 18:14
I figured it out. In your initial suggestion, I removed the quotes but not the curly braces from item.alticon, etc. Once the curly braces were removed, it worked correctly. Thank you! I get not using the quotations, but don't understand why the curly braces aren't needed. Is it because its within an angular expression? — P Ackerman
– P Ackerman, Commented Feb 18, 2015 at 19:24

floribon · Accepted Answer · 2017-03-09 10:59:26Z

As discussed by comments, the error was that you were using curly brackets in expression-bindings (more explanation about that at the end).

This will not work: (a)

ng-init="itemsrc = '{{item.icon}}'"

This will not work either: (b)

ng-init="itemsrc = {{item.icon}}"

This will: (c)

ng-init="itemsrc = item.icon"

In case (a), the itemSrc variable will get the string value "{{item.icon}}" with no further processing, which is quite useless.

The case (b) is a syntax error and will likely make angular report errors.

You need to understand that tere is not a unique way to pass information to a directive in Angular, but many:

one way binding (@), which will assign a string to a variable. The string can contain curly brackets to be dynamic. For instance the ng-src attribute of an <img> tag, such as <img ng-src="some/path/{{dynamicName}}.png">
two ways binding (=), where angular expect a variable and will keep a reference to it. For instance ng-model in an <input> tag: when modified by the input, the variable in ngModel will also be modified in the upper scope
expression binding (&), for which angular expect an expression (a full snippet of code) that will be executed on a specific action. It is the case of ng-init, ng-click and the like. No curcly brackets, just a line of code that will be processed, such as itemsrc = item.icon; (you can have ; here, it is code, but no {{}})

Great answer. There is a small error in the syntax for (c), though. There is a rogue apostrophe.

Collectives™ on Stack Overflow

AngularJS Image Source Change on Mouseover

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related