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

Question

I have this HTML code:

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

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

$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.

Synapse · Accepted Answer · 2015-11-30 12:36:58Z

2

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

edited Nov 30, 2015 at 12:36

answered Nov 30, 2015 at 12:30

Synapse

9016 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Upalr · Accepted Answer · 2015-11-30 12:47:07Z

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>

edited Nov 30, 2015 at 12:47

answered Nov 30, 2015 at 12:12

Upalr

2,1462 gold badges25 silver badges33 bronze badges

3 Comments

Idos Over a year ago

Unfortunately it does not work :( the images are "displayed" but are empty (i can't actually see them)

Tarun Dugar Over a year ago

then there must be no images at that url.

Idos Over a year ago

How could this be if beforehand it showed the images? (When i just used the normal <img src="images/ss.jpg"/> )

Tarun Dugar · Accepted Answer · 2015-11-30 12:41:16Z

1

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.

edited Nov 30, 2015 at 12:41

answered Nov 30, 2015 at 12:13

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

4 Comments

Idos Over a year ago

You are right, I meant for it to be an array of 4 images (4 entries) and not an array of a 4-image-object. I changed the controller code to: $scope.images = { src1: 'images/ss.jpg', src2: 'images/ss1.jpg', src3: 'images/ss2.jpg', src4: 'images/ss3.jpg', }; Any sense now?

Tarun Dugar Over a year ago

Yes, now just replace 'images[0]' by 'images' in my answer.

Idos Over a year ago

Sadly it still does not work.. It even "messed up" my angular for other things apparently..Can you provide with the full 2 lines of code that you meant? Because you only posted part of the lines.

Idos Over a year ago

Thanks for all your help!

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related