Angular ng-click, ng-mouseover expression and mouseover

Question

I encountered a little problem. I am making a little gallery and saw html like this:

<div class="thumbnails">
    <img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
    <img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
    <img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
    <img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
    <img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
</div><br/>

<div class="preview" align="center">
    <img name="preview" src="images/img1.jpg" alt=""/>
</div>

And now I wanted to do it repeatedly from json object So I did sth like this:

    <div class="mythumbnails">
        <img ng-click="mypreview.src=img{{$index}}.src" src="data:image/png;base64,{{x}}" name="img{{$index}}" ng-repeat="x in data.gallery" alt=""/>
    </div><br/>


    <div class="mypreview" align="center">
        <img name="mypreview" src="data:image/png;base64,{{ data.gallery[0] }}" alt=""/>
    </div>

Firstly I did mouseover but I couldn't use {{ $index }}, so I did ng-mouseover and ng-click. I don't know if the expression is wrong or what.

Thanks up front :)

@edit The problem is when I click the main picture from mypreview doesn't change.

@edit2 In Firebug:

<img class="ng-scope" ng-click="mypreview.src=img4.src" src="data:image/png;base64,..." name="img4" ng-repeat="x in data.gallery" alt="">

So it the index works.

@edit3 At the beginning I got error in console: Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=18&p3=mypreview.src%3Dimg%7B%7B%24index%7D%7D.src&p4=%7B%7B%24index%7D%7D.src

Drag13 · Accepted Answer · 2016-06-09 19:57:15Z

3

Try to replace

src="data:image/png;base64,{{ data.gallery[0] }}"

to

data-ng-src="data:image/png;base64,{{ data.gallery[0] }}"

answered Jun 9, 2016 at 19:57

Drag13

6,0281 gold badge22 silver badges44 bronze badges

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

5 Comments

Drag13 Over a year ago

Hate this enter system Ok, lets go deeper. mypreview.src=img{{$index}}.src this will be evaluated on this: mypreview.src=img1.src . Is it ok for your data?

user3613919 Over a year ago

Yes, yes. I saw in firebug that it is ok - <img class="ng-scope" ng-click="mypreview.src=img4.src" src="data:image/png;base64,..." name="img4" ng-repeat="x in data.gallery" alt="">

Drag13 Over a year ago

Please, can you make one stupid thing... Replace ALL your src to ng-src... And check console for errors...

user3613919 Over a year ago

rror: [$parse:syntax] errors.angularjs.org/1.4.8/$parse/… ... <img ng-click="mypreview.src=img{{$index}}.src" ng-src="data:image/png;base64,{{x}}" name="img{{$index}}" ng-repeat="x in data.gallery" alt="">

Drag13 Over a year ago

So first we need to do is to drop this error off. Try to replace plain ng-click function invocation to invocation from scope. Smth like this ng-click=getPreview($index) $scope.getPreview = function(index) { $scope.mypreview.src = "img"+index+".src"; }

user3613919 · Accepted Answer · 2016-06-10 00:06:03Z

0

If anyone would be interested I did this:

onmouseover="mypreview.src=this.src"

answered Jun 10, 2016 at 0:06

user3613919

7771 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular ng-click, ng-mouseover expression and mouseover

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related