如何将图像的 src 绑定到 ng-model 并在 Angular 中提取它? [英] How to bind the src of an image to ng-model and extract it in Angular?

问题描述

我想将一个图像的源绑定到另一个图像的源.

在最终结果中，大图像的源应该绑定到单击的较小(缩略图)图像的 src.这可以使用 ng-model 吗?

这是我所拥有的

 
<img ng-src="{{selectedImg.src}}">
<div><ul ng-repeat="特许经营中的拇指"><li><img ng-src="{{thumb.images[0].list}}" ng-model="selectedImg">

解决方案

你可以使用 ng-click:

<img ng-src="{{selectedImg.src}}" alt="{{slide.images[0].list}}">
<div><ul ng-repeat="特许经营中的拇指"><li><img ng-src="{{thumb.images[0].list}}"alt="{{thumb.images[0].list}}"ng-click="selectedImg.src = thumb.images[0].list"/>

但是您必须像这样在控制器中将 selectedImg 定义为一个对象:

$scope.selectedImg = {};

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

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>

解决方案

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

这篇关于如何将图像的 src 绑定到 ng-model 并在 Angular 中提取它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！