CODEWITHSUNDEEP
javascriptangularjs-ng-repeat
hholtij
hholtij

Reputation: 2936

angular ng-repeat and images in a row

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

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.

However, when I use

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

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

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?

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?

Upvotes: 1

Views: 2223

Answers (1)

el3ien
el3ien

Reputation: 5405

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>

That way you dont make multiple divs

Upvotes: 1

Related Questions