角度ng重复和连续图像 [英] angular ng-repeat and images in a row

问题描述

在我的视图模型中，我有一个完全由4个图标名称组成的数组.

In my view model I have an array of exactly 4 icon names.

如果我像这样放置4张图片:

If I place the 4 images like so:

<img ng-src="{{'/Content/img/' + vm.indicator[0]}}" alt="" />
<img ng-src="{{'/Content/img/' + vm.indicator[1]}}" alt="" />
<img ng-src="{{'/Content/img/' + vm.indicator[2]}}" alt="" />
<img ng-src="{{'/Content/img/' + vm.indicator[3]}}" alt="" />

它们可以按需要很好地显示在一行中.

they appear nicely in a row as desired.

但是，当我使用

<div ng-repeat="indicator in vm.indicator track by $index">
    <img ng-src="{{'/Content/img/' + indicator}}" alt="" />
</div>

它们出现在彼此下方. (注意:我需要按$ index跟踪"位，因为某些图标具有相同的名称).

they appear below each other. (note: I need the "track by $index" bit because some icons have the same name).

我不明白.如果我只是在第一个代码周围放置一个空的div，则没有任何变化.为什么ng-repeat div会改变什么? 以及如何使两个代码段具有相同的行为?

I don't understand it. If I just place an empty div around the first code nothing changes. Why would the ng-repeat div change anything? And how can I make the two code snippets behave the same?

在我的情况下，这不是一个大问题，因为我在数组中始终只有4个图标名称.但是，如果数组具有可变长度怎么办?

This is not a huge problem in my case because I always have exactly 4 icon names in my array. But what if the array was of variable length?

推荐答案

像这样将ng-repeat放入img标签

Put the ng-repeat in the img tag like so

<div >
    <img ng-repeat="indicator in vm.indicator track by $index" ng-src="{{'/Content/img/' + indicator}}" alt="" />
</div>

那样您就不会产生多个div

That way you dont make multiple divs

这篇关于角度ng重复和连续图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！