如何将图像的src绑定到ng-model并在Angular中提取它？

Question

我想将一张图片的来源绑定到另一张图片的来源。

在最终结果中，大图像的来源应该绑定到被点击的小（缩略图）图像的 src。这可能使用 ng-model 吗？

这是我得到的

        <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

您可以使用 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>

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

$scope.selectedImg = {};

Answer 2

为了回答您的问题，根据 Angular 文档，您只能使用 ng-model 或自定义表单控件绑定输入、选择和文本区域。

您可能想要做的是：（这正是 Saulo Lozano 使用 ng-click 所做的）

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

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

所以你不能真正以这种方式将 img 与 ng-model 绑定。此外，如果您可以将 ng-model 放入 ng-repeat 中，您将在 ng-repeat 集合的所有重复值中获得相同的 "model value"。

如何将图像的src绑定到ng-model并在Angular中提取它？

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

image

angularjs

angular-ngmodel