AngularJS로 JSON을 통해 이미지 배열에 액세스

Question

업데이트 : 이제 내가하고 싶은 일을 할 수 있습니다. 엄지 손가락을 클릭하면 큰 이미지가 lighbox에 표시됩니다. 동일한 데이터 라이트 박스 이름을 가진 두 번째 태그는 etee가 제안한 다른 ng-repeat를 사용합니다.

코드에서 볼 수 있듯이 완벽하지는 않지만 여전히 올바르게 적용하려고합니다. alos는 중첩 된 forEach를 사용하여 JSON 파일의 'large'배열을 얻었으며 console.log에 표시하지만 원래의 lighbox로 가져 오는 방법을 모르므로 세트를 표시합니다. , 그리고 당신은 현재의 길은 같은 이미지를 두 번 보여줄 것입니다.

[ 
{ 
    "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." 

} 
] 

AngularJS와

<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> 

<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> 

: 여기

는 JSON 파일의 일부입니다

호출하여 NG-응용 프로그램

$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); 
     }) 

    }) 
}); 

Link to Test Page

Answer 1

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

당신이 이미지를 가져온 이후 당신이 ng-에 추가 할 수 있습니다이 시도하고 here 지금 작업 plunker

입니다 src.