Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to bind the src of an image to ng-model and extract it in Angular?

I want to bind the source of an image to the source of another image.

visual example

In the end result, the source of the large image should be bound to the src of the clicked smaller (thumbnail) image. Is this possible using ng-model?

Here's what I've got

        <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>
like image 843
RobSeg Avatar asked Apr 09 '15 16:04

RobSeg


2 Answers

You could do it 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 have to define selectedImg as an object in your controller like this:

$scope.selectedImg = {};
like image 168
Saulo Lozano Avatar answered Sep 30 '22 09:09

Saulo Lozano


To answer your question, according to Angular Docs, you can only bind inputs, selects and textareas with ng-model, or a custom form control.

What you probably want to do is this: (which is just 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" >

So you can't really bind an img with an ng-model that way. Besides, if you could put an ng-model inside of an ng-repeat you would get the same "model value" in all of the repeated values of the ng-repeat collection.

like image 24
cyber ice Avatar answered Sep 30 '22 09:09

cyber ice