在html中使用ng repeat在控制器中显示多个图像

using ng-repeat in html to display several images in controller

本文关键字：显示 图像 控制器 ng html repeat      更新时间：2023-09-26

我有这个HTML代码：

                   <li data-thumb="images/ss.jpg">
                       <img src="images/ss.jpg"/>
                   </li>
                    <li data-thumb="images/ss1.jpg">
                        <img src="images/ss1.jpg"/>
                    </li>
                    <li data-thumb="images/ss2.jpg">
                        <img src="images/ss2.jpg"/>
                    </li>
                    <li data-thumb="images/ss3.jpg">
                        <img src="images/ss3.jpg"/>
                    </li>

我希望使用我的angularJS控制器在我的HTML中创建这样的东西：

                    <li data-thumb="{{image[i].src[i]}}" ng-repeat="image in images">
                        <img ng-src="{{image[i].src]i]}}"/>
                    </li>

（我知道上面的代码不起作用，这就是为什么我问…）

所以本质上我会有和以前一样的输出（4个不同的图像）。到目前为止，我的"ListingCtrl"控制器是这样的：

$scope.images = [{
        src1: 'images/ss.jpg',
        src2: 'images/ss1.jpg',
        src3: 'images/ss2.jpg',
        src4: 'images/ss3.jpg',
    }];

我将感谢任何帮助我完成这项任务！将来我想在那里解析一个JSON文件，并从中获取图像。。。但我想这应该是一个开始。

根据我所看到的，您有一个对象数组。所以要打印图像列表，请执行以下操作：

<li data-thumb="{{ images[$index][key] }}" ng-repeat="(key, image) in images track by $index">
    <img ng-src="{{ images[$index][key] }}"/>
</li>

或更简单的版本

<li data-thumb="{{ image }}" ng-repeat="(key, image) in images track by $index">
    <img ng-src="{{ image }}"/>
</li>

如果您需要获取数组内图像的索引，只需打印出来或使用$index变量，如：

{{ $index }}

使用此：：

<li data-thumb="{{ images[$index][key] }}" ng-repeat="(key, image) in images track by $index">
    <img ng-src="{{ images[$index][key] }}"/>
</li>

您的图像数组只包含一个对象。如果这是数据结构，那么以键值的方式迭代数组的第一个元素：

<div ng-repeat="(k, v) in images>"
    <img ng-src="{{v}}"/>
</div>

理想情况下，图像变量应该是一个数组或一个对象。当前的数据结构没有意义。

相关文章：