Проблемы с повторением «ng-repeat».

Question

Я пробовал это некоторое время, и я не понимаю. Я посмотрел документацию, и я думаю, что это мой синтаксис.

Мой HTML:

<div ng-controller="StoreController as store"> 
    <div ng-repeat="item in store.items"> 
     <img ng-src="{{item.ImageSets.ImageSet[0].SmallImage.URL}}" /> 
    </div> 
</div> 

Мой контроллер:

(function() { 
    var app = angular.module("store", []); 

    app.controller("StoreController", ["$http", function($http) { 
     var store = this; 
     store.items = [] 
     $http.get("/amazon.json").success(function(data) { 
      store.items = data.Items 
     }); 
    }]); 
})(); 

И это мой объект.

{ 
"Items": { 
    "Item": {...}, 
    "Item": {...}, 
    "Item": {...}, 
    "Item": {...} 
    } 
} 

Код работает. Но я получаю только отображение одного изображения вместо 4 изображений. Я новичок в угловой и думаю, что это проблема синтаксиса.

Answer 1

Это не угловатая проблема, это JavaScript. Дело в том, что вы пытаетесь построить объект с несколькими временными ключами (item). Итак, каждый раз, когда вы добавляете новый объект в объект, предыдущий стирается. Вот почему ваш объект имеет только один элемент.

Так делают:

var items = { 
    "item": 1, 
    "item": 2, 
} 

эквивалентно:

var items = {}; 
items["item"] = 1; 
items["item"] = 2; //items["item"] gets replaced and its value is now 2 

Вместо этого вы должны использовать массив, который содержит все элементы. Нравится

{ 
    items: [ 
     {...}, 
     {...}, 
     //... 
    ] 
};