Angular ng-repeat, image hover not working

Question

I'm having a bit of trouble working out why my images aren't rendering properly inside of an ng-repeat with an ng-init, ng-mousover and ng-mouseout.

<div ng-repeat="item in product.items">
    <div ng-init="imgsrc='{{item.image01}}'" 
         ng-mouseover="imgsrc='{{item.image02}}'" 
         ng-mouseout="imgsrc='{{item.image01}}'">
        <img ng-src="{{imgsrc}}" />
    </div>
</div>

The correct paths are rendering inside of ng-init, ng-mouseover and ng-mouseout, but the <img> tag is only updating with {{item.image01}} and {{item.image02}} instead of the actual image paths.

What am I missing here?

Check my answer. Or if you want to stick with your solution try the comment from Alon or remove the single quotes. — Tome Pejoski
– Tome Pejoski, Commented Jan 6, 2017 at 19:04
After finding the problem, really think about switching this task to CSS. This is such an overkill — azerafati
– azerafati, Commented Jan 6, 2017 at 19:05
@azerafati - the idea behind this method is to make sure there is only one image loaded at a time. I'm not aware of a CSS method that can make this work. I'm intrigued, though. Can you explain? — erier
– erier, Commented Jan 6, 2017 at 19:07

azerafati · Accepted Answer · 2017-01-06 19:07:44Z

3

remove the braces, for assigning values to variables you don't need them inside ng-init.

<div ng-repeat="item in product.items">
    <div ng-init="imgsrc=item.image01" 
         ng-mouseover="imgsrc=item.image02" 
         ng-mouseout="imgsrc=item.image01">
        <img ng-src="{{imgsrc}}" />
    </div>
</div>

answered Jan 6, 2017 at 19:07

azerafati

18.7k7 gold badges73 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tome Pejoski · Accepted Answer · 2017-01-06 19:00:36Z

1

It's fine to assign a value with ng-init, but ng-moseouver and ng-mouseout don't work the same.

Try to create a function and pass it to them:

ng-mouseover="handleMouseover()" 
ng-mouseout="handleMouseout()"

Then update the value of your variable inside of the methods accordingly.

answered Jan 6, 2017 at 19:00

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat, image hover not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related