角，如何首先显示数组中的第一组数据，并允许单击甚至更改数组索引。

Question

新的角度。找到了几个相似的例子，但有一些问题。

基本上，尝试创建一个缩略图图像列表与所选的全尺寸图像显示。很大程度上就像亚马逊的产品。

有这样的数据结构：

this.imgList = [
    {imgTitle: 'title', imgDescription: 'description', imgUrl: '1.jpg', imgTnUrl: '1tn.jpg'},
    {imgTitle: 'title', imgDescription: 'description', imgUrl: '2.jpg', imgTnUrl: '2tn.jpg'}

我看到的示例使用ng-重复，但这些示例似乎是在单击事件发生之前加载所有大小的图像。找到了几个不使用ng-重复的库，但是不能让它们工作。

我会认为我可以做类似{{x.imgList.imgTitle}}的事情，但不确定在某人单击缩略图后如何更改它。

有没有一个简单的方法来做类似的事情，而不预先加载所有的图像？

Answer 1

在角度上，您可以创建一个具有注入控制器的$scope。

$scope.imgList = [
{imgTitle: 'title', imgDescription: 'description', imgUrl: '1.jpg', imgTnUrl: '1tn.jpg'},
{imgTitle: 'title', imgDescription: 'description', imgUrl: '2.jpg', imgTnUrl: '2tn.jpg'}

$scope.showFullSize = false;

然后，在模板中，您可以使用与上面类似的范围变量，除非使用ng-src指令和ng-如果要呈现或不呈现图像。

<img ng-if="showFullSize" ng-src="{{imgList[iterator].imgUrl}}"/>
<img ng-if="!showFullSize" ng-src="{{imgList[iterator].imgTnUrl}}"/>

此外，您可以定义您的逻辑来设置showFullSize属性，该属性将显示/不显示完整大小的图像。如果希望发出请求以提取图像，则可以使用角显示/隐藏指令代替if。