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

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>

- RobSeg

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

- Saulo Lozano

---

这个很好用，谢谢。但是问题在于当它初始化时，大图片为空，只有在点击小图后才会填充。我该如何设置初始属性？ - RobSeg

您可以将特许经营数组中的任何项分配给 $scope.selectedImg.src 属性。例如，如果您想显示特许经营的第一张图片，您可以像这样初始化 $scope.selectedImg： $scope.selectedImg = {src: $scope.franchises[0].images[0].list }; - Saulo Lozano

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" >

所以你不能用那种方式绑定ng-model和img。此外，如果你能在ng-repeat中放置一个ng-model，你将在ng-repeat集合的所有重复值中获得相同的“模型值”。

- cyber ice