How to link src images with ng model and extract it in Angular?

Question

I want to link the source of the image to the source of another image.

Ultimately, the source of the large image must be tied to the src of the image with a thumbnail (thumbnail) with a click. Is this possible with the ng model?

Here is what i have

<div> <img ng-src="{{selectedImg.src}}"> </div> <div> <ul ng-repeat="thumb in franchises"> <li> <img ng-src="{{thumb.images[0].list}}" ng-model="selectedImg"> </li> </ul> </div> 

Answer 1

You can do this using ng-click:

 <div> <img ng-src="{{selectedImg.src}}" alt="{{slide.images[0].list}}"> </div> <div> <ul ng-repeat="thumb in franchises"> <li> <img ng-src="{{thumb.images[0].list}}" alt="{{thumb.images[0].list}}" ng-click="selectedImg.src = thumb.images[0].list" /> </li> </ul> </div> 

But you must define selectedImg as an object in your controller as follows:

 $scope.selectedImg = {}; 

Answer 2

To answer your question, according to Angular Docs, you can only bind inputs, selections, and text fields using an ng model or a custom form control.

What you probably want to do is the following: (this is exactly what Saulo Lozano did with ng-click)

https://jsfiddle.net/4fz4nx1k/2/

 <img ng-src="{{thumb.images[0].list}}" ng-click="selectedImg.src = thumb.images[0].list" > 

This way you really cannot bind img with the ng model. In addition, if you can place the ng model inside ng-repeat, you will get the same “model value” in all duplicate values ​​of the ng-repeat collection.