Question

我有这个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个不同的图像）。我的＆＃34; ListingCtrl＆＃34;控制器到目前为止有这个：

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

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

Answer 1

使用此::

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

Answer 2

从我所看到的你有一系列的对象。因此要打印图像列表，请执行以下操作：

<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 }}

Answer 3

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

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

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

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

3 个答案: