Question

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

基本上尝试使用显示的所选全尺寸图像创建缩略图图像列表。大多数像亚马逊一样。

拥有这样的数据结构：

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

我见过的示例使用ng-repeat，但是这些似乎在点击事件发生之前加载了所有全尺寸图像。找到了几个不使用ng-repeat的图书馆，但却无法使用这些图书馆。

本来以为我可以做{{x.imgList [0] .imgTitle}}之类的事情，但不确定在有人点击缩略图后如何更改它。

有没有一种简单的方法可以在不预先加载所有图像的情况下做类似的事情？

Answer 1

在角度中，您可以创建一个注入$ scope的 controller 。

$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 directive和ng-if渲染或不渲染图像。

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

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

Angular，如何最初显示数组中的第一组数据，并允许单击甚至更改数组索引

1 个答案: