Javascript 使用AngularJS通过JSON访问图像阵列

更新： 我现在可以做我想做的事了。我可以点击拇指，大图像将显示在lighbox中。第二个是具有相同数据灯箱名称的标记使用etee建议的另一个ng重复

正如您从代码中看到的，它并不完美，我仍然希望正确地完成它。我一直设法使用嵌套的forEach来获取JSON文件中的“大”数组，它们显示在console.log中，但我不知道如何将它们从那里获取到原始的lighbox，以便它显示集合，您将看到当前的方式两次显示相同的图像

以下是一些JSON文件：

[
{
    "name":"Cedar Run",
    "album_name":"CedarRun",
    "img":[
        {
            "thumb":["cedarRun.jpg", "cedarRun.jpg","cedarRun.jpg"]
        },
        {
            "large":["IMG_6001.jpg","IMG_6009.jpg"]
        }
    ],
    "cabin_id":"17",
    "sleeps":"2",
    "description":"1 Room",
    "number_of_bedrooms":"1",
    "bedrooms":
                    {
                        "bedroom1":"1 Queen",
                        "bedroom2":"",
                        "bedroom3":"",
                        "bedroom4":""   
                    },
    "pull_out":"",
    "living_room":"",
    "bathrooms":"",
    "bathroom_info":"Bath with Tub/Shower",
    "other_info":"",
    "winter_info":"Winter RR Only",
    "winter_rate":"198.90",
    "summer_info":"Summer RR Only",
    "summer_rate":"198.90",
    "cabin_description":"Quaint cabin perfect for two. A unique location with a view of the horseback rides going by throughout the day. Also has one small dorm refrigerator and working fireplace with firewood supplied by the ranch."

},
 {
    "name":"Pioneer",
    "album_name":"Pioneer",
    "img":[
        {
            "thumb": ["pioneer.jpg"]
        },
        {
            "large":["IMG_8561.jpg","IMG_8567.jpg", "IMG_8568.jpg"]
        }
    ],
    "cabin_id":"25",
    "sleeps":"2",
    "description":"1 Room",
    "number_of_bedrooms":"1",
    "bedrooms":
                    {
                        "bedroom1":"1 Queen",
                        "bedroom2":"",
                        "bedroom3":"",
                        "bedroom4":""   
                    },
    "pull_out":"",
    "living_room":"",
    "bathrooms":"",
    "bathroom_info":"Bath with Tub/Shower",
    "other_info":"",
    "winter_info":"Winter RR Only",
    "winter_rate":"198.90",
    "summer_info":"Summer RR Only",
    "summer_rate":"198.90",
    "cabin_description":"One cozy cabin built in the log style with country charm in mind. Located along the hillside of the sledding hill overlooking the ranch. Also has one small dorm refrigerator and working fireplace with firewood supplied by the ranch."

}
]

安格拉斯人

<table class="table table-hover">
<tr ng-repeat="x in cabins | filter:search:true">
<td>
 <div>
   <a data-lightbox="{{x.name}}" data-title="{{x.name}}"  href="_img/_lodging/{{x.album_name}}/1200w/{{x.img[1].large[0]}}"> 

   <img  class="cabin-thumb-main"  ng-src="_img/_lodging/cabin_tn/{{x.img[0].thumb[0]}}">

  </a>
    <a ng-repeat="y in x.img[1].large" data-lightbox="{{x.name}}" data-title="{{x.name}}" href="_img/_lodging/{{x.album_name}}/1200w/{{y}}" ></a>

{{img}}

试试这个，这是有效的打劫

现在，既然您已经获取了图像，您可以将它们添加到ng src。

{{img}}

试试这个，这是有效的打劫

---

现在，既然你已经获取了图像，你可以将它们添加到ng src。

你不能在x.img中执行ng repeat=img？你不能在x.img中执行ng repeat=img？谢谢etee，我采纳了你的建议，对其进行了一些调整，但效果并不完美。在什么意义上完美？请详细解释一下，当我点击拇指时，它会启动原始a标签中的较大图像，然后没有img attr的辅助a标签启动，并显示该阵列中的照片。所以当我说“完美”时，我认为它应该发生在单个a标记上，但当我尝试放置您建议的代码并进行调整时，它立即将多个图像渲染为拇指，这并不完美。在这种情况下，您可以这样做，保持缩略图img标记不在标记中，并关联一个ng click布尔变量，并在a标记上使用ng show来显示幻灯片感谢etee，我采纳了你的建议，对其进行了一些调整，但并不完美。完美在什么意义上？请详细解释一下，当我点击拇指时，它会启动原始a标签中的较大图像，然后没有img attr的辅助a标签启动，并显示该阵列中的照片。所以当我说“完美”时，我认为它应该发生在单个a标记上，但当我尝试放置您建议的代码并进行调整时，它立即将多个图像渲染为拇指，这并不完美。在这种情况下，您可以这样做，将缩略图img标记保留在标记之外，并关联ng click布尔变量，并在a标记上使用ng show显示幻灯片

    <td>
    <h3><strong>{{x.name}}</strong></h3>
    <span>{{x.description}}</span><span><small> (Sleeps {{x.sleeps}})</small></span>
    <h4>{{x.other_info}}</h4>
    <br>
  <h4>Description</h4>
   <p>{{x.cabin_description}} </p>
    <h5>Bed & Bath</h5>
    <p>{{x.bedrooms.bedroom1}}</p>
    <p>{{x.bedrooms.bedroom2}}</p>
    <p>{{x.bedrooms.bedroom3}}</p>
    <p>{{x.bedrooms.bedroom4}}</p>
    <p>{{x.pull_out}}</p>
    <p>{{x.bathroom_info}}</p>
    <br>  

         </tr>           
        </table>

   $scope.search = {};
   $http.get('_js/lodging.json').then(function (response) {
     $scope.cabins = response.data;
      $scope.images = []

     angular.forEach($scope.cabins, function(item){

      angular.forEach(item.img, function(i){
        var  large_img = i.large;
 //              return large_img;
           console.log(large_img);
      })

    }) 
});

<div ng-repeat="img in x.img[1].large">
  <p>{{img}}</p>
</div>