Угловые повторяющиеся изображения

Новые угловые и развивающие простую страницу, чтобы узнать о внутренней работе. У меня есть 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>

источник

2014-11-07 Troy Bryant

Ваш массив изображений только имеет один элемент в нем с изображением определили три раза. Измените его следующим образом, чтобы было три отдельных элемента, и он должен работать.

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

источник

2014-11-07 15:07:11 Razzildinho

Этот объект изображения кажется «сломанным», вы практически переопределяете атрибут изображения 3 раза. В JavaScript объекты имеют синтаксис как {attribName1: attValue1, attribName2: attValue2 ...} Что вы создаете здесь:

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

Является ли массив с 1 пункт, который является объектом, с 1 свойство, «изображение» со значением ... «Images/image3.jpg», может быть (или что-то еще, я не удивлюсь, если такие атрибуты с двойным определением, как это, было на самом деле неопределенным поведением).

То, что вы, вероятно, хотите, вместо того, чтобы либо массив с 3-х элементов, или объект с 3-мя различными атрибутами, а именно:

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

Вы можете перебирать элементов массива и атрибутов объекта тоже с нг-повтора, но вы должны соответствующим образом изменить свой код.

источник

2014-11-07 15:08:51 doldt

Угловые повторяющиеся изображения

ответ

Смежные вопросы