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

Here is the sample the way we need to display the images

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>

检出this！

在成角度的图像行中选择一个图像

1 个答案: