Разделите теги JSON при рендеринге данных объекта в угловом

Question

Я отрисовываю этот кусок JSON (1), используя angular.js 1.6, название и описание, похоже, загружаются, однако я не могу получить URL-адрес из свойства изображения, это в настоящее время отображается следующим образом:

<img ng-src="{"original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_2.jpg"}"> 

Как бы я мог просто получить URL-адрес в моем шаблоне?

(1) Это ссылка для моего объекта JSon:

var items = [ 
     { 
      "id": 61, 
      "title": "Title 1", 
      "description": "Desc", 

     "images": [ 
       { 
        "original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_2.jpg" 
       }, 
       { 
        "original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_5.jpg" 
       }, 
       { 
        "original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_3.jpg" 
       } 

      ] 
]; 

(2) Это как данные отображается в шаблоне

<div ng-repeat="item in Item"> 
    <img ng-src="{$item.images[0]$}" /> 
    <h4>{$item.title$}</h4> 
    <p> {$item.description$} </p> 
</div> 

Answer 1

Вы ссылающийся на объект в вашем images коллекции, а не свойство объекта, который содержит URL-адрес. Попробуйте следующее:

<div ng-repeat="item in Item"> 
    <img ng-src="{$item.images[0].original$}" /> 
    <h4>{$item.title$}</h4> 
    <p>{$item.description$}</p> 
</div> 

Answer 2

У вас есть разыгрывать еще раз! Вы получаете items[n].images[0], что дает вам что-то вроде { "original": "... url..." }.

Вам просто нужно получить запись original с этого объекта. Заменить

<img ng-src="{$item.images[0]$}" /> 

С:

<img ng-src="{$item.images[0].original$}" />