выберите одно изображение в ряду изображений в угловых

Question

У меня есть файл JSON, в котором у меня есть сведения о машине.Мне нужно отобразить эти детали вместе с изображениями в строке в зависимости от их размера, и после их отображения я смогу выбрать одно изображение из этого списка.

Благодарим Вас за помощь в этом.Заранее спасибо.Пример данных JSON:

[{
    "large": [{
        "cpus": "",
        "memory": "",
        "name": ""
      },
      {
        "cpus": "",
        "memory": "",
        "name": ""
      },
      {
        "cpus": "",
        "memory": "",
        "name": ""
      }
    ]
  },
  {
    "medium": [{
        "cpus": "",
        "memory": "",
        "name": ""
      },
      {
        "cpus": "",
        "memory": "",
        "name": ""
      },
      {
        "cpus": "",
        "memory": "",
        "name": ""
      }
    ]
  },
  {
    "small": [{
        "cpus": "",
        "memory": "",
        "name": ""
      },
      {
        "cpus": "",
        "memory": "",
        "name": ""
      },
      {
        "cpus": "",
        "memory": "",
        "name": ""
      }
    ]
  }
]

Вот пример того, как нам нужно отображать изображения

Answer 1

Я не совсем уверен в вашей озабоченности, но ... Если вы используете AngularJS (как помечено), вы можете добавить изображения в свой JSON следующим образом:

{
    "large": [
                {
                    "cpus": "Test item",
                    "memory": "Test description",
                    "name": "Test name",
                    "images": [
                        {   "id": "1",
                            "url": "https://effortz.com/wp-content/uploads/dedicated-hosting-server.png" },
                        {   "id": "2",
                            "url": "https://1.cms.s81c.com/sites/default/files/2018-08-28/Systems-Servers-mainframe-360x360-min.jpg" }
                    ]
                }
             ]
}

.. и тогда вы можетеиспользуйте их в коде как:

<ul>
    <li ng-repeat="item in $ctrl.dataset">
        <div>{{item.cpus}}</div>
        <div>{{item.memory}}</div>
        <div>{{item.name}}</div>
        <div>
            <span ng-repeat="img in item.images"><img ng-src="{{img.url}}" ng-click="$ctrl.selectImage(img)"></img></span>
        </div>
    </li>
</ul>

Проверьте это out!