Question

新角度和开发一个简单的页面只是为了学习内部工作。我所拥有的是显示名称价格和描述以及按钮和完整图像的div。我想要做的就是在完整图像下方显示2-3张额外的图像。问题是同一个完整图像再次显示，并且没有其他图像显示。

这是角度

(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"
                }
        ]
    }
]

})();

这是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>

Answer 1

该图像对象似乎已经破坏了＃34;您实际上重新定义了图像属性3次。在javascript中，对象的语法类似于{attribName1：attValue1，attribName2：attValue2 ...} 你在这里创造的是什么：

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

是一个包含1个项目的数组，它是一个对象，具有1个属性，＆＃34; image＆＃34;，其值为...＆＃34; Images / image3.jpg＆＃34;也许（或者其他什么，如果像这样的双重定义属性实际上是未定义的行为，我不会感到惊讶。）

您可能想要的是具有3个元素的数组或具有3个不同属性的对象，即：

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

您也可以使用ng-repeat迭代数组成员和对象属性，但您必须相应地更改代码。

Answer 2

您的图像数组中只有一个项目，图像定义了三次。像下面这样更改它，以便有三个单独的项目，它应该工作。

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

角度重复图像

2 个答案: