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

Question

我想将一个图像的源绑定(bind)到另一个图像的源。

在最终结果中，大图像的源应绑定(bind)到单击的较小(缩略图)图像的 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 定义为 Controller 中的对象，如下所示:

$scope.selectedImg = {};