Angular repeating images

Question

New to angular and developing a simple page just to learn the inner workings. What I have is a div that display name price and description along with a button and a full image. What I'm trying to do is underneath that full image display 2-3 additional images. The problem is the same full image is displaying again and none of the additional images are displaying.

Here is the angular

(function () {

var app = angular.module('gemStore', []);

app.controller('StoreController', function () {
    this.products = gems;
});

var gems = [
    {
        name: 'Defmei',
        price: 2.95,
        description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ',
        canPurchase: true,
        soldOut: false,
        images: [
            {
                image: "Images/image1.jpg",
                image: "Images/image2.jpg",
                image: "Images/image3.jpg" 
            }
        ]

    },
    {
        name: 'Sijoi',
        price: 5.95,
        description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ',
        canPurchase: true,
        soldOut: true,
        images: [

                {
                    image: "Images/image4.jpg",
                    image: "Images/image3.jpg",
                    image: "Images/image2.jpg"
                }
        ]
    }
]

})();

Here is the HTML

<body data-ng-controller="StoreController as store" >
<div class="display" data-ng-repeat="product in store.products">
    <h1>{{product.name}}</h1>
    <h2>{{product.price | currency}}</h2>
    <p> {{product.description}} </p>

    <img class="imageStyles" data-ng-src="{{product.images[0].image}}"/> 
    <br />

    <div data-ng-repeat="image in product.images">
        <img data-ng-src="{{image.image}}" class="thumbs" />
    </div>
    <button data-ng-show="product.canPurchase">Add to cart</button>

</div>
</body>

doldt · Accepted Answer · 2014-11-07 15:08:51Z

That image object seems "broken", you're practically redefining the image attribute 3 times. In javascript, objects have a syntax like { attribName1: attValue1, attribName2: attValue2 ...} What you're creating here:

images: [
        {
            image: "Images/image1.jpg",
            image: "Images/image2.jpg",
            image: "Images/image3.jpg" 
        }
    ]

Is an array with 1 item, which is an object, with 1 property, "image", with a value of... "Images/image3.jpg" maybe (or whatever, I wouldn't be surprised if double-defining attributes like this was in fact undefined behaviour).

What you probably want instead is either an array with 3 elements, or an object with 3 distinct attributes, ie:

images: [
        {
            "image1": "Images/image1.jpg",
            "image2": "Images/image2.jpg",
            "image3": "Images/image3.jpg" 
        }
    ]

You can iterate through array members and object attributes too with ng-repeat, but you have to change your code accordingly.

Razzildinho · Accepted Answer · 2014-11-07 15:07:11Z

0

Your images array only has one item in it with image defined three times. Change it like the following so that there are three separate items and it should work.

images: [
    {image: "Images/image4.jpg"},
    {image: "Images/image3.jpg"},
    {image: "Images/image2.jpg"}
]

answered Nov 7, 2014 at 15:07

Razzildinho

2,5841 gold badge21 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular repeating images

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related