$ scopeオブジェクトに画像を表示する

Question

私はこのようなマークアップを持っています。私のimgng-init私はng-repeatからの画像の値を渡しています。現在、2つの値が渡され、APIからデータをフェッチするために使用されます。

<div class="row" ng-repeat="x in roomdata.data"> 

    <div class="well well-sm">{{x.room_type}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a> 
    </div> 
    <h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5> 
    <img ng-src="{{room_image}}" ng-init=fetchImage(x.image)> 

</div> 

ここに私のGETメソッドは、私のコンソールが私に2枚の画像URLSを示し

$scope.fetchImage = function(value){ 
      $http({ 
      method: 'GET', 
      url: '&image_id=' + value 
     }).then(function (response) { 
       var imgdata = response.data; 
       var imgdata1 = imgdata.data.image_name; 
       $scope.room_image = "/" + imgdata1; 

       console.info($scope.room_image); 
      }); 
     }; 

fetchImage関数内です。

https://uploads/165753081311.08.10-c_ft_p_2_582_379.jpg 
https://uploads/950286957i-ma-ss-1920-800x450.jpg 

のようなしかし、私は、私は唯一の第二の値が最初のものを上書きするので、これが起こっている2番目のURL

Answer 1

から画像を見ることができるimg ng-src={{room_image}}を使用していた私の見解インチそこにはx.room_imageがあるはずです。また、私はfetchImage(x)を変更したことに注意してください。

<div class="row" ng-repeat="x in roomdata.data"> 

    <div class="well well-sm">{{x.room_type}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a> 
    </div> 
    <h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5> 
    <img ng-src="{{x.room_image}}" ng-init=fetchImage(x)> 

</div> 

ので、fetchImage関数は次のようになります：このような

$scope.fetchImage = function(x){ 
    $http({ 
     method: 'GET', 
     url: '&image_id=' + x.image 
    }).then(function (response) { 
     var imgdata = response.data; 
     var imgdata1 = imgdata.data.image_name; 
     x.room_image = "/" + imgdata1; 
     console.info(x.room_image); 
    }); 
};