如何将图像的src绑定到ng-model并将其提取到Angular中? [英] How to bind the src of an image to ng-model and extract it in Angular?
本文介绍了如何将图像的src绑定到ng-model并将其提取到Angular中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将一个图像的源绑定到另一个图像的源.
I want to bind the source of an image to the source of another image.
最终结果是,大图像的源应该绑定到所单击的较小(缩略图)图像的src.可以使用ng-model吗?
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?
这就是我所拥有的
<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>
推荐答案
您可以使用ng-click来做到这一点:
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>
但是您必须像这样在控制器中将selectedImg定义为对象:
But you have to define selectedImg as an object in your controller like this:
$scope.selectedImg = {};
这篇关于如何将图像的src绑定到ng-model并将其提取到Angular中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文