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

Question

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>

Denis Tsoi · Accepted Answer · 2017-03-14 12:21:51Z

11

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 = {};

edited Mar 14, 2017 at 12:21

Denis Tsoi

10.6k8 gold badges42 silver badges61 bronze badges

answered Apr 9, 2015 at 16:24

Saulo Lozano

2562 silver badges6 bronze badges

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

2 Comments

RobSeg Over a year ago

This works great, thank you. The thing is when this initializes, the large image is empty and only gets filled when a small one is clicked. How do I set this initial property?

Saulo Lozano Over a year ago

You could assign any item from the franchises array to the $scope.selectedImg.src property. For example, if you want to show the first image from franchises, you could initialize $scope.selectedImg like this: $scope.selectedImg = {src: $scope.franchises[0].images[0].list };

cyber ice · Accepted Answer · 2015-04-22 13:42:54Z

5

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.

edited Apr 22, 2015 at 13:42

answered Apr 9, 2015 at 16:37

cyber ice

3833 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related