javascript - AngularJS Image Source Change on Mouseover - Stack Overflow

admin管理员组

文章数量:1356959

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>

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>

• javascript
• jquery
• angularjs
• angularjs-ng-repeat

Share Improve this question Follow asked Feb 18, 2015 at 6:02 P AckermanP Ackerman 2,4062323 silver badges2525 bronze badges 7

• 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 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 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 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 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 Commented Feb 18, 2015 at 19:24

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

As discussed by ments, 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 {{}})

本文标签： javascriptAngularJS Image Source Change on MouseoverStack Overflow