时间戳

首页 > 解决方案 > 以角度选择一排图像中的单个图像

html - 以角度选择一排图像中的单个图像

问题描述

我有一个 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": ""
      }
    ]
  }
]

这是我们显示图像所需的示例

标签： htmlangularjs

解决方案

我不太确定您是否担心，但是...如果您使用 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>

看看这个！

推荐阅读