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

I have this HTML code:

我有这个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>

And I wish to use my angularJS controller in order to create something like this in my HTML instead:

我希望使用我的angularJS控制器，以便在我的HTML中创建类似的东西：

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

(I know the above code doesn't work, that is why I am asking...)

（我知道上面的代码不起作用，这就是我要问的原因......）

So essentially I will have the same output as before (4 different images). My "ListingCtrl" controller so far has this:

所以基本上我将拥有与以前相同的输出（4个不同的图像）。到目前为止，我的“ListingCtrl”控制器有：

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

I will appreciate any help in making me accomplish this! In the future I want to parse a JSON file there and get the images from that instead... But I guess this should be a start.

我将非常感谢帮助我实现这一目标！在将来我想在那里解析一个JSON文件并从中获取图像......但我想这应该是一个开始。

3 个解决方案

#1

From what I can see you have an array of objects. So to print the image list do this:

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

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

or a simpler version

或更简单的版本

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

If you need to get the index of the image inside the array just print out or use the $index variable like so:

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

{{ $index }}

#2

use this::

用这个：：

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

#3

Your images array just contains one object. If this is the data stucture, then iterate over the first element of your array in a key value fashion:

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

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

Ideally, your images variable should either be an array or an object. The current data structure doesn't make sense.

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

#1