CODEWITHSUNDEEP
javascriptangularjshtmlcontroller
Idos
Idos

Reputation: 15310

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

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.

Upvotes: 0

Views: 980

Answers (3)

Upalr
Upalr

Reputation: 2148

use this::

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

Upvotes: 2

Tarun Dugar
Tarun Dugar

Reputation: 8971

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.

Upvotes: 1

Synapse
Synapse

Reputation: 901

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

Upvotes: 2

Related Questions